需要做一个需求:新增一个xml文件时,添加数量不确定,属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头、下面的属性值只是进行增删改不就行了,就类似于mysql给表里填数据一样。
<强>可是目前似乎还没有表格的直接增删改一行的操作,那要怎么实现呢? 于是,通过上网以及自己的思考,终于实现了,代码,思路以及效果图如下:
1 html部分:
& lt; el-button类型=俺晒Α盄click=癮ddRow (tableData)”在新增& lt;/el-button>
& lt; template>
& lt; el-table
:数据=" https://www.yisu.com/zixun/tableData "
max-height=" 250 "
@cell-dblclick=皌ableDbEdit”比;
& lt; el-table-column
支持="名称"
label="名称"
宽度=" 150 "比;
& lt;/el-table-column>
& lt; el-table-column
xpath支持=" "
标签=" xpath "
宽度=" 120 "比;
& lt;/el-table-column>
& lt; el-table-column
支持=" desc "
标签=" desc "
宽度=" 120 "比;
& lt;/el-table-column>
& lt; el-table-column
支持=凹壑怠?
标签=凹壑怠?
宽度=" 120 "比;
& lt;/el-table-column>
& lt; el-table-column
支持=" defVal "
label=" defVal "
宽度=" 300 "比;
& lt;/el-table-column>
& lt; el-table-column
固定=罢贰?
label="操作“
宽度=" 120 "比;
& lt;模板slot-scope=胺段А北?
& lt; el-button
@click.native.prevent=" deleteRow(范围即可。美元指数,tableData)”
type=" text "
大?靶 北?
移除
& lt;/el-button>
& lt;/template>
& lt;/el-table-column>
& lt;/el-table>
& lt;/template>
2样式部分
& lt; style>
.el-table .warning-row {
背景:oldlace;
}
.el-table .success-row {
背景:# f0f9eb;
}
.cell-edit-color {
颜色:# 2 db7f5;
粗细:大胆的;
}
.cell-edit-input .el-input .el-input__inner {
宽度:100 px;
}
.cell-icon {
光标:指针;
颜色:# fff;
}
& lt;/style>
3.数据定义:
规则:{
文件名:[
{要求:真实、消息:“请输入文件路径”,触发:“模糊”}
),
policyfileName:(
{要求:真实、消息:“请输入文件路径”,触发:“模糊”}
),
parmna:(
{要求:真实、消息:“请输入数据字段名称”,触发:“模糊”}
),
备注:[
{要求:真实、消息:“请输入分组类型名称”,触发:“模糊”}
]
},
activeName:“包括”,
tabPosition:“离开”,
dialogFormVisible:假的,
formQuery: [],
serverForm: {
文件名:”,
policyfileName:“,//政策下的包括
scmType:”,
版本:”,
地址:"
},
tableData: [{
名称:“aa”,
xpath:“bb”,
描述:“cc”,
价值:“弟弟”,
defVal:“ee”
},{
名称:“aa1”,
xpath:“bb1组”,
描述:“cc1”,
价值:“dd1”,
defVal:“觉得”
})
之前
4具体方法:
deleteRow(指数、行){//移即可除一行
行。拼接(指数(1);//删掉该行
},
addRow (tableData、事件){//新增一行//之前一直想不到怎么新增一行空数据,最后幸亏一位朋友提示:表格新增一行,其实就是源数据的新增,从源数据入手就可以实现了,于是恍然大悟啊!
tableData。推({name:“xpath:“desc:“价值:“defVal: "})
},
tableDbEdit(行、列、单元、事件){//编辑单元格数据//当鼠标双击单元格里面具体单元格的时候,即可对数据进行编辑操作,其实就是添加了一个输入框,最终将输入框中的数据保存下来就行了。
event.target。innerHTML=" ";
让cellInput=document.createElement(“输入”);
cellInput.valuehttps://www.yisu.com/zixun/=?
cellInput。setAttribute(“类型”、“文本”);
cellInput.style。宽度=?0%”;
cell.appendChild (cellInput);
cellInput。onblur=function () {
cell.removeChild (cellInput);
event.target。innerHTML=cellInput.value;
};
}
效果如下
- - - - - - - - - -分割线- - - - - - - - - -
