vue通过数据驱动实现表格行的增加与删除

以前做明细表格的新增改查,都是需要操作dom的,但现在数据驱动,不需要了,只需要操作数据即可,相当简单

1. 明细表的编写

该表格是实现了对modalFormData.items 的显示,我们新增或删除行,也只需要对modalFormData.items 进行操作即可

2. 操作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);
            }

至此,明细表的新增删除功能已完成!