el-table 判断是否被勾选
时间: 2023-12-27 18:23:33 浏览: 118
vue el-table实现自定义表头
根据提供的引用[1],可以看出该代码是一个函数,用于判断el-table中的某一行是否被勾选。如果该行被勾选,则返回0,否则返回1。因此,我们可以通过调用该函数来判断某一行是否被勾选。
具体实现方法如下:
1. 在el-table中添加一个列,用于显示勾选框。
2. 在该列的模板中,绑定勾选框的状态到该行数据的某个属性上,例如:v-model="row.checked"。
3. 在el-table中添加一个属性,用于存储被勾选的行的数据,例如:selection。
4. 在勾选框的change事件中,判断勾选框的状态,如果为true,则将该行数据添加到selection中,否则将该行数据从selection中移除。
5. 在需要判断某一行是否被勾选的地方,调用引用中提供的函数,传入该行数据的索引和勾选框所在列的索引即可。
下面是一个示例代码,用于演示如何判断el-table中的某一行是否被勾选:
```html
<template>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<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 prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' },
{ name: '赵六', age: 24, address: '深圳市' }
],
selection: []
}
},
methods: {
handleSelectionChange(val) {
this.selection = val
},
selectEnable(row, index) {
if (row.checked) {
return 0
} else {
return 1
}
}
}
}
</script>
```
阅读全文