用vue.js写出一个批量删除表格内容的代码

好的，以下是用 Vue.js 写出批量删除表格内容的代码：

<template>
<div>
<button @click="deleteSelected">批量删除</button>
<table>
<thead>
<tr>
<th><input type="checkbox" v-model="selectAll"></th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
<td><input type="checkbox" v-model="item.selected"></td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
data() {
return {
selectAll: false,
tableData: [
{ name: '张三', age: 18, gender: '男', selected: false },
{ name: '李四', age: 20, gender: '女', selected: false },
{ name: '王五', age: 22, gender: '男', selected: false },
{ name: '赵六', age: 24, gender: '女', selected: false },
],
};
},
methods: {
deleteSelected() {
const selectedItems = this.tableData.filter((item) => item.selected);
selectedItems.forEach((item) => {
const index = this.tableData.indexOf(item);
this.tableData.splice(index, 1);
});
this.selectAll = false;
},
},
};
</script>