想用el-radio达到以下效果

问题遇到的现象和发生背景

我想要达到的结果

如图所示，想要用element ui达到以上效果
点击删除时，会有弹出框出现
单选框后面是带出的当列的内容
然后点击一个，进行删除操作

不知道怎样做，求各位赐教

https://blog.csdn.net/malone66/article/details/119700267

我记得这里面有表格，删除，弹框来着，要不行就练习我一下，得找代码
https://blog.csdn.net/xingyu_qie/article/details/127235158

el-radio

直接套用官网的例子再改改就可以了。v-model绑定value的值

大概是这样，简单参考一下showDialog的方法

   <el-table
            :data="tableData">
        <el-table-column
                prop="date"
                label="A"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="B"
                width="180">
        </el-table-column>
        <el-table-column
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="showDialog(scope.row)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
        <!-- label填写你想要的值-->
        <el-radio v-model="radio" label="1">{{dialogValue.date}}</el-radio>
        <el-radio v-model="radio" label="2">{{dialogValue.name}}</el-radio>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleDelete">确 定</el-button>
  </span>
    </el-dialog>

  data() {
            return {
                dialogVisible:false,
                tableData: [{
                    date: '123',
                    name: 'nick',
                }],
                dialogValue: {},
                radio:'1'
            }
        },
        methods:{
            showDialog(row) {
                console.log(row);
                this.dialogValue=row;
                this.dialogVisible=true;
            },
            handleDelete(){
                console.log(this.radio); // 选中的值
                // 调用删除的方法
            }

        }

直接改下样式就好了，

<div style="
    display: flex;
    flex-direction: column;
">
 <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</div>

如果你想做成点击对应文字也可以 选择的 就比较复杂一点,可以帮你找一下,之前有写过

参考一下呢