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 相关文章推荐
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
微信小程序自动客服功能
Nov 02 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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
php抓即时股票信息
2006/10/09 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
浅析js封装和作用域
2013/07/09 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
Python简单连接MongoDB数据库的方法
2016/03/15 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
Java基础面试题
2012/11/02 面试题
毕业生的自我评价分享
2013/12/18 职场文书
行政人事岗位职责
2014/03/17 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
大学生助学金感谢信
2015/01/21 职场文书
杭白菊导游词
2015/02/10 职场文书
撤诉状格式范本
2015/05/19 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
python APScheduler执行定时任务介绍
2022/04/19 Python