Vue el-table cell insert button group el-radio-group

To insert the button group el-radio-group in the el-table cell of Vue's Element UI library, you need to use the scoped slot function to add the button group el-radio-group in the el-table by inserting custom content.

Here is a simple sample code showing how to insert el-radio-group button group in el-table cell:

<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>

In this example, we used el-table's scoped slot feature to insert custom content into cells in el-table-column. In the custom content, we added the el-radio-group component and bound it to the data attribute of the corresponding column. For each row of data, we can select different states through el-radio-group.

Note that we used the label attribute in the right el-table-column element to add the table header label. This makes the code easier to read and understand the contents of the data table.

expand

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

Please like it if it is useful, and develop a good habit!

Please leave a message for questions, exchanges, and encouragement!