美文网首页
vue通过数据驱动实现表格行的增加与删除

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

作者: 爱余星痕 | 来源:发表于2018-10-03 14:26 被阅读0次

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

    1. 明细表的编写
       <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 进行操作即可

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

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

    相关文章

      网友评论

          本文标题:vue通过数据驱动实现表格行的增加与删除

          本文链接:https://www.haomeiwen.com/subject/lvizoftx.html