如何用代码实现el-table多列单独多选按钮
时间: 2023-10-18 22:07:30 浏览: 51
您好,对于el-table多列单独多选按钮的实现,您可以按照以下步骤进行操作:
1. 在el-table组件中添加selection属性,并设置为true,表示启用多选功能。
2. 在el-table-column组件中添加type属性,并设置为selection,表示该列为多选列。
3. 使用slot-scope插槽来自定义表格渲染方式,并添加el-checkbox组件用于选择。
4. 在代码中,通过ref属性获取到table实例,再调用table.selection获取选中的数据。
示例代码如下:
```html
<template>
<el-table :data="tableData" ref="table" :selection="true">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="单独多选列">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked"></el-checkbox>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 21, checked: false },
{ name: '李四', age: 22, checked: false },
{ name: '王五', age: 23, checked: false },
{ name: '赵六', age: 24, checked: false },
],
}
},
methods: {
getSelection() {
const table = this.$refs.table
const selectedData = table.selection
console.log(selectedData)
},
},
}
</script>
```
以上是el-table多列单独多选按钮的实现方法,希望能够帮到您。