实现 Vue3 中 ElTable
全选删除可以分为以下几个步骤：
1. 添加
全选 checkbox。在 ElTable 上方添加一个 checkbox，用于
全选/
取消全选。
```
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<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>
<div>
<el-checkbox v-model="
checkedAll" @cha
nge="handleCheckAllCha
nge">
Check All
</el-checkbox>
</div>
</div>
</template>
```
2. 监听
全选 checkbox 变化。
使用 `v-model` 绑定
全选 checkbox 的状态，在 `@cha
nge` 事件中修改每行数据的 `
checked` 属性。
```
<script>
import { ref } from 'vue';
export default {
setup() {
const tableData = ref([
{
id: 1,
name: 'John',
age: 18,
address: 'New York',
checked: false,
},
{
id: 2,
name: 'Amy',
age: 22,
address: 'Los A
ngeles',
checked: false,
},
{
id: 3,
name: 'Bob',
age: 30,
address: 'Chicago',
checked: false,
},
]);
const
checkedAll = ref(false);
const handleCheckAllCha
nge = (value) => {
tableData.value.forEach((item) => {
item.
checked = value;
});
};
return {
tableData,
checkedAll,
handleCheckAllCha
nge,
};
},
};
</script>
```
3.
实现删除
功能。添加一个删除按钮，点击后删除选中的行数据。
```
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<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-column>
<template #default="{ row }">
<el-button type="da
nger" size="mini" @click="handleDelete(row)">
Delete
</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-checkbox v-model="
checkedAll" @cha
nge="handleCheckAllCha
nge">
Check All
</el-checkbox>
<el-button type="da
nger" @click="handleDeleteAll">Delete All</el-button>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const tableData = ref([
{
id: 1,
name: 'John',
age: 18,
address: 'New York',
checked: false,
},
{
id: 2,
name: 'Amy',
age: 22,
address: 'Los A
ngeles',
checked: false,
},
{
id: 3,
name: 'Bob',
age: 30,
address: 'Chicago',
checked: false,
},
]);
const
checkedAll = ref(false);
const handleCheckAllCha
nge = (value) => {
tableData.value.forEach((item) => {
item.
checked = value;
});
};
const handleDelete = (row) => {
const index = tableData.value.indexOf(row);
tableData.value.splice(index, 1);
};
const handleDeleteAll = () => {
const
checkedItems = tableData.value.filter((item) => item.
checked);
checkedItems.forEach((item) => {
const index = tableData.value.indexOf(item);
tableData.value.splice(index, 1);
});
};
return {
tableData,
checkedAll,
handleCheckAllCha
nge,
handleDelete,
handleDeleteAll,
};
},
};
</script>
```
这样就完成了 Vue3 中 ElTable 的
全选删除
功能。
本文介绍了如何使用AngularJs的ng-checked指令快速实现全选和取消全选的功能，通过简单的代码示例展示其工作原理。
最低0.47元/天 解锁文章
扫一扫
636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
