element-ui中tables默认勾选全部
element-ui中默认情况下,table组件中的checkbox列不会自动勾选全部行。如果需要实现勾选全部行的功能,可以通过以下步骤实现:
- 在表头中添加一个全选的checkbox,例如:
<el-table-column type="selection" width="55">
<template slot-scope="{selection}">
<el-checkbox v-model="selectAll" @change="handleSelectAll"></el-checkbox>
</template>
</el-table-column>
其中,selectAll为一个Boolean类型的变量,表示是否全选,handleSelectAll为一个方法,用于处理全选的逻辑。
- 在表格数据中添加一个
selected属性,用于表示该行是否被选中,例如:
[
{
name: 'John',
age: 18,
selected: false
},
{
name: 'Jane',
age: 22,
selected: false
}
]
- 在
handleSelectAll方法中,遍历表格数据,将每一行的selected属性设置为selectAll的值,例如:
handleSelectAll() {
this.tableData.forEach(item => {
item.selected = this.selectAll
})
}
- 在表格中使用
selected属性来绑定每一行的勾选状态,例如:
<el-table-column type="selection" width="55">
<template slot-scope="{row}">
<el-checkbox v-model="row.selected"></el-checkbox>
</template>
</el-table-column>
这样,就可以实现表格中勾选全部行的功能了
原文地址: https://www.cveoy.top/t/topic/chp9 著作权归作者所有。请勿转载和采集!