1-1.vue+element-ui实现简单的删除操作_vue3 element 批量删除

Vue删除表格中的数据

这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020。
1.首先在<template>标签中写好表格模板，用到的是element-ui中的Table表格组件，其中有好几种不同的样式可供我们选择。在这里我选择的是带边框表格。创建数据表格的代码：

<el-table :data="tableData" :stripe="true" :border="true" width="100%">
	<el-table-column label="日期" prop="date"></el-table-column>
	<el-table-column label="姓名" prop="name"></el-table-column>
	<el-table-column label="地址" prop="address"></el-table-column>
	<el-table-column label="操作" prop="address"></el-table-column>
</el-table>
1
2
3
4
5
6

注明：

• <el-table>标签代表的是整个大表格；
• <el-table-column>标签代表的是表格的列；
• data属性是绑定的是对象数组；
• prop属性是对应对象中的键名；
• label属性是用来定义表格的列名；
• border属性是定义表格的竖直方向是否带边框，默认为false，true则表示表格竖直方向代表边框；
• stripe属性是可以创建带斑马纹的表格，方便用户区分出不同行的数据，默认值为false.

2.表格模板创建好之后，我们可以再增加一列，同时增加删除按钮。这里使用的是element-ui的按钮组件Button，其中按钮也有好几种不同的样式可供选择，通过设置不同的type类型选择不一样的按钮样式。我们这里选择的是type为danger样式的按钮。

<el-table-column label="操作">
		<template slot-scope=
1