前端vue实现表格的增删功能方法

小雄芯

已于 2022-11-08 11:51:45 修改

阅读量878

点赞数 2

文章标签： javascript 前端 vue.js

于 2022-09-22 10:57:37 首次发布

本文链接：https://blog.csdn.net/liugaoyuans/article/details/123076190

版权

先看成果

具体代码

关键就在移除和新增这两个点击事件一定要加上去，在后续功能实现就是，表格增建了，提交到后台的表单同样增减

<div>
            <el-form size="small">
              <el-row :gutter="10">
                <el-form-item>
                  <template>
                    <el-table border :data="tableData" style="width: 500px">
                      <el-table-column prop="organizationId" label="机构">
                      </el-table-column>
                      <el-table-column prop="depId" label="部门">
                      </el-table-column>
                      <el-table-column prop="roleName" label="角色" v-if="this.configList == 'Y' ">
                      </el-table-column>
                      <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" size="small"> 移除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-form-item>
                <el-button type="primary" @click="addRow(tableData)">新增</el-button>
              </el-row>
            </el-form>
          </div>

export default {
  data() {
    return {
      tableDatass: [],
        },
    };
  },
methods: {
deleteRow(index, rows) {//删除改行
      rows.splice(index, 1);
    },
    // 表格新增
    addRow(tableData, event) {
      tableData.push({
        fildtp: '', address: ''
      })
    },
}