vue批量删除表格前端,vue表格实现删除一行功能
这篇文章主要介绍了某视频剪辑软件实现单行删除与批量删除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
单行删除与批量删除一、单行删除二、批量删除简单的批量删除，全选删除
单行删除与批量删除
一、单行删除
埃尔-表格-列align= center fixed= right label=操作宽度=100
模板槽-范围="范围"
El-button type= text size= small icon= El-icon-edit /El-button
埃尔按钮
@click=handleClick(scope.row)
type=text
大小=小
icon=el-icon-delete
/el-button
/模板
/El-表格-列
在对应的删除按钮添加事件scope.row保证选中当前行
导出默认值{
data() {
常量数据=[];
返回{
//删除记录的密码
删除代码：[]
};
},
方法：{
//表格里的点击删除图标\
异步手柄单击(行){
常量确认结果=等待。$确认（
此操作将永久删除该文件，是否继续？,
提示，
{
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
}
).catch(err=err)；
if (confirmResult！==确认){
归还这个 message.info(已取消!);
}
这个。删除代码。推(排。id)；
//调用的删除接口
const { data: res }=等待此消息. axios.delete(
/问题检查/更新删除/这。删除代码，
{
数据：this.deleteCode
}
);
if (res.code！=成功){
归还这个message.error(删除信息失败!);
}
这个。删除代码=[]；
},
}
二、批量删除
El-button @ click= batchDeleteBuild(多节) plain批量删除/el-button
导出默认值{
data() {
返回{
//被选中的列表记录
multipleSection: []，
};
},
方法：{
//批量删除选中数据方法
异步batchDeleteBuild() {
//判断是否选择了数据
如果(这个。多节。长度==0){
警报(请选择要删除的数据);
返回；
}
//如果有选中的数据，那么弹出消息框
const confirmDelete=等待。$确认（
此操作会永久删除建筑信息，是否删除？,
提示，
{
confimrButtonText:确定，
取消按钮文本： 取消，
类型："警告"
}
).catch(err=err)；
//如果用户确认删除，则返回字符串确认
//如果用户取消删除，则返回字符串取消
如果(确认删除！==确认){
归还这个 message.info(已取消);
}
//将选中的数据推到删除代码数组中
for(var I=0；我这个。多节。长度；i ) {
var j=I；
var id=this.multipleSection[j].id；
这个。删除代码。推送(id)；
}
//删除删除代码中的数据
const { data: res }=等待此消息. axios.delete(
/question/DeleteQuestionBatch ，
{
数据：this.deleteCode
}
);
if (res.code！=成功){
归还这个message.error(删除课程信息失败!);
}
这个。删除代码=[]；
},
}
简单的批量删除，全选删除
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题练习：用户管理/标题
link rel=样式表 type= text/CSS href= CSS/bootstrap。量滴CSS /
脚本src=js/jquery.min.js/script
脚本src= js/bootstrap。量滴js /脚本
/头
身体
div class=容器
氘添加用户/h2
窗体操作= 窗体-水平
div class=窗体-组
的标签= name class= control-label col-sm-2 col-sm-offset-2 姓名：/标签
div class=col-sm-6
input type= text class= form-control id= name v-model= user。name placeholder=输入姓名
/div
/div
div class=窗体-组
标签for= age class=控制标签col-sm-2 col-sm-offset-2 姓名：/标签
div class=col-sm-6
input type= text class= form-control id= age v-model= user。年龄 placeholder=输入年龄
/div
/div
div class=窗体-组
的标签= email class= control-label col-sm-2 col-sm-offset-2 姓名：/标签
div class=col-sm-6
输入类型= text class= form-control id= email v-model= user。电子邮件 placeholder=输入邮箱
/div
/div
div class= form-group text-center
输入类型=按钮值=添加@ click= addUser class= BTN BTN小学/
输入类型=重置值=重置class=btn btn-primary/
/div
/表单
整点
table class= table table-bordered table-hover
标题class=h3文本居中文本信息用户列表/标题
四羟乙基己二酰胺
tr
th class=文本中心多选/th
th class=文本中心序号/th
th class=文本中心姓名/th
th class=文本中心年龄/th
th class=文本中心邮箱/th
th class=文本中心操作/th
/tr
/thead
在需要分行下载处加上
tr v-for=(user，index) in users
td class=文本中心
输入类型=复选框:值=index v-model=selectArr
/td
TD class= text-center { { index 1 } }/TD
TD class= text-center“{ user。name } }/TD
TD class= text-center“{ user。年龄} }/TD
TD class= text-center“{ user。电子邮件} }/TD
td class=文本中心
button class= BTNBTN-危险 @ click=删除一个(索引)删除/按钮
/td
/tr
tr
td colspan=6 class=text-right
{{selectArr}}
输入类型= checkbox class= checkbox @ click= select all
“BTNBTN-危险”批量删除/按钮
按钮@ click=全部删除 type= button class= BTN BTN-危险删除所有/按钮
/td
/tr
/tbody
/表格
/div
script src=js/vue.js/script
脚本
让vm=新Vue({
艾尔：。集装箱，
数据：{
用户：[
{姓名：李，年龄：26岁，电子邮件：李@gmail.com}，
{姓名：杰伊，年龄：40岁，电子邮件： jay@gmail.com}
],
用户：{},
selectArr:[]
},
方法：{
addUser:function(){//添加用户
if(this.user) {
这个。用户。推(这个。用户)；
这个。user={ }；
}
},
deleteAll(){//全部删除
this.users=[]
},
deleteOne(index){//删除指定栏目
这.用户.拼接(索引，1)
},
deleteSel(){//选择删除
设arr=[]；
var len=this。用户。长度；
对于(设I=0；ileni ) {
如果(这个。选择箭头。指数(I)=0){
控制台。日志(这个。选择箭头。(I)的索引；
}否则{
由…改编推(这个。用户[I])；
}
}
this.users=arr
这个。selectarr=[]；
},
selectAll(event){//全选
//console.log(事件);
var _ this=this
//控制台。日志(事件。当前目标)；
如果(!event.currentTarget.checked) {
这个。selectarr=[]；
}否则{
这个。selectarr=[]；
/*这里的这指向问题需要注意一下每一个用功能声明的函数在调用时都会在函数内创建自己的这个。
**这个一般是函数所操作的对象。如果没有操作的对象这个。在使用严格的；严格模式下是未定义，非严格模式下是窗户。
**也就是说，功能声明的函数总是有自己的这个。从而遮盖外层作用域中的这个。
**如果用es6的箭头函数()={}就没有自己的这个。在箭头函数()={}中访问这个，是访问外层作用域中的这
*/
//这个。用户。foreach(函数(项目，i) {
//_this.selectArr.push(i)
//})
this.users.forEach((item，i)={
this.selectArr.push(i)
})
}
}
}
});
/脚本
/body
/html
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。