补充上面问题 的勾选框相关代码
时间: 2024-02-20 14:01:41 浏览: 30
好的,这里提供一份代码,包含了勾选框的相关代码:
```
<template>
<div>
<el-button type="danger" @click="handleDeleteSelected">删除选中</el-button>
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection"></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>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18, address: '北京市' },
{ id: 2, name: '李四', age: 20, address: '上海市' },
{ id: 3, name: '王五', age: 22, address: '广州市' },
{ id: 4, name: '赵六', age: 24, address: '深圳市' }
],
selectedRows: []
}
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection
},
handleDeleteSelected() {
const ids = this.selectedRows.map(row => row.id)
this.tableData = this.tableData.filter(row => !ids.includes(row.id))
this.$refs.table.clearSelection()
}
}
}
</script>
```
在上述代码中,我们使用了@selection-change事件监听选择框的勾选状态变化,并将被勾选的行数据存储在selectedRows数组中。在删除选中的行时,我们也需要使用这个数组来获取要删除的行的id。同时,在删除完成后,我们需要调用table的clearSelection方法来清空选择框的勾选状态。