vue+element实现表格新增、编辑、删除功能
需要做⼀个需求：新增⼀个xml⽂件时，添加数量不确定、属性相同的xml标签，想了想可以⽤表格做啊，属性相同，使⽤统⼀的表头，下⾯的属性值只是进⾏增删改不就⾏了，就类似于mysql给表⾥填数据⼀样。
可是⽬前似乎还没有表格的直接增删改⼀⾏的操作，那要怎么实现呢？于是，通过上⽹以及⾃⼰的思考，终于实现了，代码、思路以及效果图如下：
1 html部分：
<el-button type="success" @click="addRow(tableData)">新增</el-button>
<template>
input绑定onblur事件<el-table
:data="tableData"
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 = ateElement("input");
cellInput.value = "";
cellInput.setAttribute("type", "text");
cellInput.style.width = "60%";
cell.appendChild(cellInput);
event.target.innerHTML = cellInput.value;
};
}
效果如下
————————分割线———————–
之前实现的都是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 = im();//拿到当前的属性值
//新建⼀个option元素
let option = ateElement('option')
let option2 = ateElement('option')
if(name==="fildtp"){
cellInput = ateElement("select");
/
/为option赋值和内容
option.value="1";
<="字符";
option2.value="2";
<="数字";
//将option元素直接添加为⼦元素
cellInput.appendChild(option);
cellInput.appendChild(option2);
cell.appendChild(cellInput);
/
/将单元格的内容填充为所选中元素的内容，⽽不是值
event.target.innerHTML = cellInput.selectedOptions[0].text;
//将所选中元素的值赋给该⾏的值，每个属性都执⾏⼀次赋值，那么在最终提交表单的时候，就能保证当前表的值传到后端
row.fildtp=cellInput.value;
}
}else if(name==="musttg"){
cellInput = ateElement("select");
option.value="1";
<="是";
option2.value="0";
<="否";
cellInput.appendChild(option);
cellInput.appendChild(option2);
cell.appendChild(cellInput);
event.target.innerHTML = cellInput.selectedOptions[0].text;
row.musttg=cellInput.value;
}
}else if(name==="looptg"){
cellInput = ateElement("select");
option.value="1";
<="循环";
option2.value="0";
<="⾮循环";
cellInput.appendChild(option);
cellInput.appendChild(option2);
cell.appendChild(cellInput);
event.target.innerHTML = cellInput.selectedOptions[0].text;
row.looptg=cellInput.value;
};
}else{
debugger
cellInput = ateElement("input");
cellInput.value = "";
cellInput.setAttribute("type", "text");
cellInput.style.width = "75%";
cell.appendChild(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"){
}else if(name==="loophd"){
row.loophd=cellInput.value;
}else if(name==="remark"){
}
};
}
},
这种⽅式，⽐较详细，也⽐较容易理解，但是总感觉有点不完美，⾸先新增了⼀⾏以后，必须要双击
某⼀个单元格参能进⾏内容的输⼊，不够明显。从代码上来说，代码量也较⼤；⽽且使⽤的是原⽣的html标签，因此，我在之后对此进⾏了⼀个优化，直接使⽤vue的代码实现，不仅⼤⼤减少了代码量，还实现了操作的友好性。具体实现可以查看的我的⽂章：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。