需要做一个需求：新增一个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;
};
}
效果如下
————————分割线———————–
之前实现的都是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实现表格的编辑、删除、以及新增行的最优方法
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论