欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-08-17 21:27:12
需要做一个需求:新增一个xml文件时,添加数量不确定、属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于my...

需要做一个需求:新增一个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实现表格的编辑、删除、以及新增行的最优方法

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