使用element-ui和vue.js写一段批量删除表格内容的代码

好的，以下是使用element-ui和vue.js写一段批量删除表格内容的代码：

<template>
<div>
<el-button type="danger" @click="handleDelete">批量删除</el-button>
<el-table :data="tableData" ref="multipleTable" :row-key="row => row.id" :show-header="true" :highlight-current-row="true" :default-sort="{prop: 'date', order: 'descending'}">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>

<script>
export default {
data() {
return {
tableData: [{
id: 1,
date: '2022-01-01',
name: '张三',
address: '北京市朝阳区'
}, {
id: 2,
date: '2022-01-02',
name: '李四',
address: '上海市浦东新区'
}, {
id: 3,
date: '2022-01-03',
name: '王五',
address: '广州市天河区'
}, {
id: 4,
date: '2022-01-04',
name: '赵六',
address: '深圳市南山区'
}],
multipleSelection: []
};
},
methods: {
handleDelete() {
if (this.multipleSelection.length === ) {
this.$message({
message: '请选择要删除的数据',
type: 'warning'
});
return;
}
this.$confirm('确认删除选中的数据吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const ids = this.multipleSelection.map(item => item.id);
this.tableData = this.tableData.filter(item => !ids.includes(item.id));
this.multipleSelection = [];
this.$message({
message: '删除成功',
type: 'success'
});
}).catch(() => {});
}
}
};
</script>