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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python 数据类型强制转换的总结
2021/01/25 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
工作自我评价分享
2013/12/01 职场文书
美发店5.1活动方案
2014/01/24 职场文书
关于母亲节的感言
2014/02/04 职场文书
保密协议书范本
2014/04/22 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
感谢师恩主题班会
2015/08/17 职场文书
大学军训口号大全
2015/12/24 职场文书
用python画城市轮播地图
2021/05/28 Python
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers