el-table 实现0和1判断selection的勾选状态
时间: 2024-05-11 20:13:51 浏览: 13
可以通过设置 el-table 的 selection 属性来实现 0 和 1 判断勾选状态。
首先,需要在 el-table 的 columns 中加入一个名为 selection 的列,并设置 type 为 selection。
```
<template>
<el-table :data="tableData" :row-key="row => row.id" :selection="selection">
<el-table-column type="selection"></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-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
```
然后,在 data 中定义一个名为 selection 的数组,用于存储选中的行数据。
```
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
name: 'John',
age: 18,
address: 'New York',
},
{
id: 2,
name: 'Jane',
age: 22,
address: 'London',
},
{
id: 3,
name: 'Bob',
age: 30,
address: 'Paris',
},
],
selection: [], // 存储选中的行数据
};
},
};
</script>
```
最后,在 methods 中定义一个名为 isAllSelected 的方法,用于判断是否全部选中。
```
<script>
export default {
data() {
// ...
},
methods: {
isAllSelected() {
return this.selection.length === this.tableData.length;
},
},
};
</script>
```
在模板中可以使用 isAllSelected 方法来判断勾选状态,例如:
```
<el-checkbox v-model="selectAll" :indeterminate="selection.length && !isAllSelected()" @change="toggleAllSelection"></el-checkbox>
```
其中,selectAll 是一个绑定全选状态的变量,toggleAllSelection 是一个绑定全选操作的方法。