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 相关文章推荐
jQuery之日期选择器的深入解析
Jun 19 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
js对象基础实例分析
Jan 13 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
编写React组件项目实践分析
Mar 04 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
python实现图片批量剪切示例
2014/03/25 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
股东协议书
2014/04/14 职场文书
2014年党课学习材料
2014/05/11 职场文书
模具专业求职信
2014/06/26 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
布达拉宫导游词
2015/02/02 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书