Vue el-table 单元格插入按钮组el-radio-group

要在Vue的Element UI库的el-table单元格中插入按钮组el-radio-group，需要使用scoped slot功能，通过插入自定义内容在el-table中添加按钮组el-radio-group。

以下是一个简单的示例代码，展示了如何在el-table单元格中插入el-radio-group按钮组：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column label="Status">
      <template slot-scope="scope">
        <el-radio-group v-model="statusArr">
          <el-radio label="1">R1</el-radio>
          <el-radio label="2">R2</el-radio>
          <el-radio label="3">R3</el-radio>
        </el-radio-group>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    statusArr:[],
    return {
      tableData: [
        { name: 'John', status: '1' },
        { name: 'Jane', status: '2' },
        { name: 'Bob', status: '3' }
      ]
    };
  }
};
</script>

在此示例中，我们使用了el-table的scoped slot功能，将自定义内容插入到el-table-column中的单元格中。在自定义内容中，我们添加了el-radio-group组件，并将其绑定到对应列的数据属性上。对于每行数据，我们都可以通过el-radio-group选择不同的状态。

请注意，我们在右侧的el-table-column元素中使用了label属性来添加表头标签。这使得代码更容易阅读和理解数据表格的内容。

扩展

//前端回显
this.statusArr = this.statusStr.split(",");
//转换为字符串传到后台
this.statusStr = this.statusArr.join(",");

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！