前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue通过数据驱动实现表格行的增加与删除

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

作者头像
星痕
发布2018-10-08 11:25:05
2K0
发布2018-10-08 11:25:05
举报
文章被收录于专栏:JAVA后端开发JAVA后端开发

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

  1. 明细表的编写
代码语言:javascript
复制
   <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 的方法如下:
代码语言:javascript
复制
  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);
            }

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.10.03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档