el-table没加勾选框勾选框出现
时间: 2024-11-05 19:10:39 浏览: 19
vue3 el-table多级表头收缩扩展的实现(JS原味版)
在Vue的Element UI库中,`el-table`组件默认并不包含勾选框。如果你想在表格中添加勾选框功能,你可以通过自定义列(custom column)来实现。以下是一个简单的步骤:
1. 首先,在表头(header row)中添加一个单元格(cell),并设置其内容为你想要的复选框元素。可以使用HTML `<template>` 结构来插入这个元素。
```html
<template slot="header" slot-scope="scope">
<el-checkbox v-model="tableCheckboxAll" @change="handleCheckChange"></el-checkbox>
</template>
```
2. 定义数据属性 `tableCheckboxAll` 来控制所有行的选中状态,并提供事件处理器 `handleCheckChange` 来处理勾选状态变化。
```javascript
export default {
data() {
return {
tableCheckboxAll: false,
};
},
methods: {
handleCheckChange(value) {
this.$refs.table.toggleRowSelection(this.data, value);
},
},
}
```
3. 在表格的 `ref` 属性上绑定 "table",以便后续操作表格的选择。
```html
<el-table :data="data" ref="table">
...
</el-table>
```
4. 如果需要允许单行或多行选择,记得在`data`数组里每个对象也维护一个表示是否被选中的字段,比如`selected`。
以上就是基本的勾选框添加方法,如果你还有其他特殊需求,比如动态增减勾选列、分页等,可能还需要额外处理。
阅读全文