以前做明细表格的新增改查,都是需要操作dom的,但现在数据驱动,不需要了,只需要操作数据即可,相当简单
- 明细表的编写
<el-table
:data="modalFormData.items "
border
style="width: 100%">
<el-table-column
label="名称"
>
<template slot-scope="scope">
<el-input v-model="scope.row.labelName" placeholder="请输入label"></el-input>
</template>
</el-table-column>
<el-table-column
label="值">
<template slot-scope="scope">
<el-input v-model="scope.row.labelValue" placeholder="请输入值"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" :render-header="renderHeader" >
<template slot-scope="scope">
<el-button-group>
<el-button size="mini" type="danger" @click="renderRemoveRow(scope.$index)">
删除
</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
该表格是实现了对modalFormData.items 的显示,我们新增或删除行,也只需要对modalFormData.items 进行操作即可
- 操作modalFormData.items 的方法如下:
renderHeader(h, params) {
let a = [h('el-button', {
props: {
size: "mini",
type: "primary"
},
on: {
click: () => {
this.renderAddRow();
}
}
}, '增加')];
return h('div', a);
},
renderAddRow() {
this.modalFormData.items.push({"labelValue": "", "labelName": ""});
},
renderRemoveRow(index) {
this.modalFormData.items.splice(index, 1);
}
至此,明细表的新增删除功能已完成!
网友评论