elementui表格编辑删除,elementui表格增删改查
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现表格增加删除修改数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现表格增加删除修改数据的具体代码，供大家参考，具体内容如下
这里用到是设置一个弹出框来实现此功能，还有一种方法是直接在原来的基础上面进行修改
效果如下：
表格的表格：
El-table:data= table data style= width:100%
El-table-column prop= date label=日期宽度= 180 /El-表格-列
El-table-column prop= name label=姓名宽度= 180 /El-表格-列
埃尔-表格-列属性=地址标签=地址/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
！-点击编辑进入编辑页面进行编辑表格数据-
El-button size= small @ click= handleEdit(scope .$index，scope.row)编辑/el-button
El-button size= small type= danger @ click= handle delete(scope .$index，scope.row)删除/el-button
/模板
/El-表格-列
/el-table
弹出框的设置：
！-下面这个用来设置点击添加按钮的弹出框，里面可以进行嵌套表格来展示弹出的表格信息，使用下面的：可见。同步来控制显示与否-
！-里面绑定的是我们新设置的值，填写完成后，将我们这个新值塞到页面中所有的数据当中去-
el-dialog title=用户信息：可见。sync= dialogFormVisible
！-在埃尔对话中进行嵌套埃尔格式实现弹出表格的效果-
el-form :model=form
El-表单-项目标签=地址：label-width=formLabelWidth
el-input v-model=form.address 自动完成=关/El-输入
/El-表单-项目
El-表单-项目标签=姓名：label-width=formLabelWidth
El-输入v-model=form.name 自动完成=关/El-输入
/El-表单-项目
El-表单-项目标签=日期：label-width=formLabelWidth
埃尔-日期选择器
v-model=form.date
type=date
占位符=选择日期
值格式=yyyy-MM-dd
/El-日期选择器
/El-表单-项目
El-表单-项目标签=性别：label-width=formLabelWidth
El-select v-model= form。区域 placeholder=性别
埃尔选项标签=男值=男/el选项
埃尔选项标签=女值=女/el选项
/el-select
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
el-button @click=取消取消/el-button
！-设置触发更新的方法-
El-button type= primary @ click= update 确定/el-button
/div
/el-dialog
完整的代码如下：
模板
v-loading= loading element-loading-text=拼命加载中
！-垂直装载设置加载-
div class=selectMenu
El-date-picker v-model= value 6 type= date range placeholder=选择日期范围/El-日期选择器
！-点击触发增加方法-
El-button type= primary @ click= add 新增/el-button
/div
div class=tableMain
El-table:data= table data style= width:100%
El-table-column prop= date label=日期宽度= 180 /El-表格-列
El-table-column prop= name label=姓名宽度= 180 /El-表格-列
埃尔-表格-列属性=地址标签=地址/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
！-点击编辑进入编辑页面进行编辑表格数据-
El-button size= small @ click= handleEdit(scope .$index，scope.row)编辑/el-button
El-button size= small type= danger @ click= handle delete(scope .$index，scope.row)删除/el-button
/模板
/El-表格-列
/el-table
/div
div class=page
埃尔分页
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:当前页。sync=当前第3页
:page-size=100
布局=上一页，翻页，下一页，跳转
：总计=1000
/El-分页
/div
！-下面这个用来设置点击添加按钮的弹出框，里面可以进行嵌套表格来展示弹出的表格信息，使用下面的：可见。同步来控制显示与否-
！-里面绑定的是我们新设置的值，填写完成后，将我们这个新值塞到页面中所有的数据当中去-
el-dialog title=用户信息：可见。sync= dialogFormVisible
！-在埃尔对话中进行嵌套埃尔格式实现弹出表格的效果-
el-form :model=form
El-表单-项目标签=地址：label-width=formLabelWidth
el-input v-model=form.address 自动完成=关/El-输入
/El-表单-项目
El-表单-项目标签=姓名：label-width=formLabelWidth
El-输入v-model=form.name 自动完成=关/El-输入
/El-表单-项目
El-表单-项目标签=日期：label-width=formLabelWidth
埃尔-日期选择器
v-model=form.date
type=date
占位符=选择日期
值格式=yyyy-MM-dd
/El-日期选择器
/El-表单-项目
El-表单-项目标签=性别：label-width=formLabelWidth
El-select v-model= form。区域 placeholder=性别
埃尔选项标签=男值=男/el选项
埃尔选项标签=女值=女/el选项
/el-select
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
el-button @click=取消取消/el-button
！-设置触发更新的方法-
El-button type= primary @ click= update 确定/el-button
/div
/el-dialog
/div
/模板
脚本类型=text/ecmascript-6
导出默认值{
data() {
返回{
装：真的，
//表格的数据
表格数据：[
{
日期："2017-05-01",
名称： 士兵76,
区域： 男，
地址： 国王大道，
城市：""
},
{
日期："2017-05-02",
名称： 源氏，
区域： 男，
地址： 尼泊尔，
城市：""
},
{
日期："2017-05-03",
名称： 黑百合，
区域： 女，
地址： 沃斯卡亚工业区，
城市：""
},
{
日期："2017-05-04",
名称： 猎空，
区域： 女，
地址： 国王大道，
城市：""
},
{
日期："2017-05-03",
名称： 查莉娅，
区域： 女，
地址： 沃斯卡亚工业区，
城市：""
},
{
日期："2017-05-03",
名称： 禅雅塔，
区域： 男，
地址： 尼泊尔，
城市：""
},
{
日期："2017-05-03",
名称： 半藏，
区域： 女，
地址： 花村，
城市：""
}
],
//城市选择数据
城市列表：[
{姓名： 国王大道 },
{姓名： 尼泊尔 },
{姓名： 沃斯卡亚工业区 },
{姓名： 花村 },
{姓名： 尼泊尔 },
{姓名： 月球基地 }
],
dialogFormVisible: false，
formLabelWidth:“80px”，
//设置形式用于进行添加的时候绑定值
表单：{},
值6: ,
当前页面3: 1,
当前索引：""
};
},
已创建(){
//设置回调函数，进行1.5秒的装货动画显示
setTimeout(()={
this.loading=false
}, 1500);
},
方法：{
showTime() {
这个alert(this . value 6，起止时间, {
confirmButtonText:确定，
回调：操作={
这个消息({
类型："信息",
消息： 已显示
});
}
});
},
//添加数据的方式，为添加函数单独设置一些值。在对象中设置这些值，然后将新添加的对象填充到总数据中。
add() {
this.form={
日期： ，
名称： ，
区域： ，
地址：“”
};
//设置点击按钮后显示的对话框。
this.dialogFormVisible=true
},
update() {
//this . form . date=format(this . form . date)；
//可以在html上格式化日期。
//提交我们添加到总数据中的信息。
this . tabledata . push(this . form)；
this.dialogFormVisible=false
},
handleEdit(索引，行){
//传递数据的索引，实现数据的回显。
this . form=this . table data[index]；
this.currentIndex=index
//设置对话框的可见性
this.dialogFormVisible=true
},
handleDelete(索引，行){
//设置类似控制台类型的功能
这个。$confirm(永久删除此文件，是否继续？，提示，{
ConfirmButtonText:确定，
CancelButtonText:取消，
类型：“警告”
})。然后(()={
//删除对应索引位置的数据，可以设置行请求后台删除数据。
this.tableData.splice(index，1)；
这个。$message({
类型：“成功”，
消息：“删除成功！”
});
})。catch(()={
这个。$message({
类型：“信息”，
消息：“已删除”
});
});
},
取消(){
//取消时，直接设置对话框不可见。
this.dialogFormVisible=false
},
handleSizeChange(val) {
Console.log(每页`${val}个项目`)；
},
handleCurrentChange(val) {
Console.log(`当前页面：$ { val } `)；
}
}
};
/脚本
样式lang=scss 。基本表{。tableMain {
边距：{
top:10px；
}
}。页面{
浮动：左；
边距：{
top:10px；
}
}
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。