vue+element实现表格新增、编辑、删除功能


Posted in Javascript onMay 28, 2019

需要做一个需求:新增一个xml文件时,添加数量不确定、属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于mysql给表里填数据一样。

可是目前似乎还没有表格的直接增删改一行的操作,那要怎么实现呢?于是,通过上网以及自己的思考,终于实现了,代码、思路以及效果图如下:

1 html部分:

<el-button type="success" @click="addRow(tableData)">新增</el-button>
<template>
 <el-table
 :data="tableData"
 style="width: 100%"
 max-height="250"
 @cell-dblclick="tableDbEdit">
 <el-table-column
 prop="name"
 label="name"
 width="150">
 </el-table-column>
 <el-table-column
 prop="xpath"
 label="xpath"
 width="120">
 </el-table-column>
 <el-table-column
 prop="desc"
 label="desc"
 width="120">
 </el-table-column>
 <el-table-column
 prop="value"
 label="value"
 width="120">
 </el-table-column>
 <el-table-column
 prop="defVal"
 label="defVal"
 width="300">
 </el-table-column>
 <el-table-column
 fixed="right"
 label="操作"
 width="120">
 <template slot-scope="scope">
 <el-button
 @click.native.prevent="deleteRow(scope.$index, tableData)"
 type="text"
 size="small">
 移除
 </el-button>
 </template>
 </el-table-column>
 </el-table>
</template>

2 样式部分

<style>
 .el-table .warning-row {
 background: oldlace;
 }
 .el-table .success-row {
 background: #f0f9eb;
 }
 .cell-edit-color{
 color:#2db7f5;
 font-weight: bold;
 }
 .cell-edit-input .el-input, .el-input__inner {
 width:100px;
 }
 .cell-icon{
 cursor:pointer;
 color:#fff;
 }
</style>

3.data定义:

rules: {
 fileName: [
 { required: true, message: '请输入文件路径', trigger: 'blur' }
 ],
 policyfileName: [
 { required: true, message: '请输入文件路径', trigger: 'blur' }
 ],
 parmna: [
 { required: true, message: '请输入数据字段名称', trigger: 'blur' }
 ],
 remark: [
 { required: true, message: '请输入分组类型名称', trigger: 'blur' }
 ]
 },
 activeName: 'include',
 tabPosition: 'left',
 dialogFormVisible: false,
 formQuery:[],
 serverForm: {
 fileName: '',
 policyfileName: '',//policy下的include
 scmType: '',
 version: '',
 address: ''
 },
 tableData: [{
 name: 'aa',
 xpath: 'bb',
 desc: 'cc',
 value: 'dd',
 defVal: 'ee'
 }, {
 name: 'aa1',
 xpath: 'bb1',
 desc: 'cc1',
 value: 'dd1',
 defVal: 'ee1'
}]

4 具体方法:

deleteRow(index, rows) {//移除一行
 rows.splice(index, 1);//删掉该行
 },
 addRow(tableData,event){//新增一行
 //之前一直想不到怎么新增一行空数据,最后幸亏一位朋友提示:表格新增一行,其实就是源数据的新增,从源数据入手就可以实现了,于是 恍然大悟啊!
 tableData.push({ name: '', xpath: '',desc:'',value:'',defVal:'' })
 },

tableDbEdit(row, column, cell, event) {//编辑单元格数据
//当鼠标双击单元格里面具体单元格的时候,即可对数据进行编辑操作,其实就是添加了一个输入框,最终将输入框中的数据保存下来就行了。
 event.target.innerHTML = "";
 let cellInput = document.createElement("input");
 cellInput.value = "";
 cellInput.setAttribute("type", "text");
 cellInput.style.width = "60%";
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 event.target.innerHTML = cellInput.value;
 };
}

效果如下

vue+element实现表格新增、编辑、删除功能

————————分割线———————?

之前实现的都是input框的方式,昨天又做了个优化,增加了下拉框的方式,并且新增了提交表单时,能够将数据传到后端的功能。

首先我们知道,select标签的格式,比较特殊,没有input那么直接,每次只需要修改,展示它本身的value属性的值就OK了,select的标签格式如下:

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

那么, 我的修改之后的编辑方法如下:

tableDbEdit(row, column, cell, event) {
 event.target.innerHTML = "";
 let cellInput = '';
 let name = column.property.trim();//拿到当前的属性值
 //新建一个option元素
 let option = document.createElement('option')
 let option2 = document.createElement('option')
 if(name==="fildtp"){
 cellInput = document.createElement("select");
 //为option赋值和内容
 option.value="1";
 option.text="字符";
 option2.value="2";
 option2.text="数字";
 //将option元素直接添加为子元素
 cellInput.appendChild(option);
 cellInput.appendChild(option2);
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 //将单元格的内容填充为所选中元素的内容,而不是值
 event.target.innerHTML = cellInput.selectedOptions[0].text;
 //将所选中元素的值赋给该行的值,每个属性都执行一次赋值,那么在最终提交表单的时候,就能保证当前表的值传到后端
 row.fildtp=cellInput.value;
 }
 }else if(name==="musttg"){
 cellInput = document.createElement("select");
 option.value="1";
 option.text="是";
 option2.value="0";
 option2.text="否";
 cellInput.appendChild(option);
 cellInput.appendChild(option2);
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 event.target.innerHTML = cellInput.selectedOptions[0].text;
 row.musttg=cellInput.value;
 }
 }else if(name==="looptg"){
 cellInput = document.createElement("select");
 option.value="1";
 option.text="循环";
 option2.value="0";
 option2.text="非循环";
 cellInput.appendChild(option);
 cellInput.appendChild(option2);
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 event.target.innerHTML = cellInput.selectedOptions[0].text;
 row.looptg=cellInput.value;
 };
 }else{
 debugger
 cellInput = document.createElement("input");
 cellInput.value = "";
 cellInput.setAttribute("type", "text");
 cellInput.style.width = "75%";
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 event.target.innerHTML = cellInput.value;
 if(name==="fildcd"){
 row.fildcd=cellInput.value;
 }else if(name==="fildna"){
 row.fildna=cellInput.value;
 }else if(name==="fildln"){
 row.fildln=cellInput.value;
 }else if(name==="fildde"){
 row.fildde=cellInput.value;
 }else if(name==="defult"){
 row.defult=cellInput.value;
 }else if(name==="format"){
 row.format=cellInput.value;
 }else if(name==="enumcd"){
 row.enumcd=cellInput.value;
 }else if(name==="loophd"){
 row.loophd=cellInput.value;
 }else if(name==="remark"){
 row.remark=cellInput.value;
 }
 };
 }
},

这种方式,比较详细,也比较容易理解,但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入,不够明显。从代码上来说,代码量也较大;而且使用的是原生的html标签,因此,我在之后对此进行了一个优化,直接使用vue的代码实现,不仅大大减少了代码量,还实现了操作的友好性。具体实现可以查看的我的文章:Vue+Element实现表格的编辑、删除、以及新增行的最优方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
window.location.hash知识汇总
Nov 09 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
Vue实现表格批量审核功能实例代码
May 28 #Javascript
vue+Element实现搜索关键字高亮功能
May 28 #Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 #Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 #Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 #Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 #Javascript
Vue实现搜索结果高亮显示关键字
May 28 #Javascript
You might like
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP 断点续传实例详解
2017/11/11 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python实现简单图书管理系统
2019/11/22 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python 6行代码制作月历生成器
2020/09/18 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
质检部岗位职责
2013/11/11 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2014年工程师工作总结
2014/11/25 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书