el-table每行插入el-checkbocgroup
时间: 2023-12-27 14:25:37 浏览: 90
在el-table中每行插入el-checkbox-group可以通过自定义列模板来实现。你可以使用scoped slot来自定义每行的内容,并在其中插入el-checkbox-group组件。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column type="selection">
<template slot-scope="scope">
<el-checkbox-group v-model="selectedRows">
<el-checkbox :label="scope.row.id"></el-checkbox>
</el-checkbox-group>
</template>
</el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Jane', age: 25 },
{ id: 3, name: 'Bob', age: 30 }
],
selectedRows: []
};
}
};
</script>
```
在上面的代码中,我们使用了el-table的selection类型列来显示el-checkbox组件,并使用v-model绑定selectedRows数组来获取选中的行数据。
阅读全文