基于element ui 动态添加删除表格数据

今天给大家做一个基于element ui的表格效果。我们要实现的大致蓝图是，点击添加按钮，然后添加表格一行数据，这个数据可以是后台给的列表，也可以是自己配置的表单项。给大家上图先！

QQ截图20201029113952.png

点击添加的弹窗效果如下：

QQ截图20201029113921.png QQ截图20201029113931.png

我们布个局先，把表格和弹出窗口给整出来。我们要做两个表格，一个弹窗，再来个表单，齐活儿了您嘞。
布局结构都写在代码注释里面了，不啰嗦

<template>
  <div class="editTable">
        <!-- 这是我们的操作按钮组 start-->
    <el-button @click="add">添加</el-button>
    <el-button @click="save">保存</el-button>
        <!-- 这是我们的操作按钮组 end-->
        
        <!-- 表格 start -->
    <el-table :data="tableData">
            <template v-for="(item,index) in header">
                <el-table-column v-if="item.prop == 'options'" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteIt(scope.row)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.prop != 'selection'" :label="item.label" :formatter="item.formatter?item.formatter:null" :prop="item.prop" :width="item.width">
                </el-table-column>
            </template>
        </el-table>
        <!-- 表格 start -->
        
        <!-- 添加操作窗口  start-->
        <el-dialog title="添加表格数据" :visible.sync="tableVisiable" width="760px">
            <!-- 这里我们用element的tab页面来实现切换  基于name切换-->
            <el-tabs v-model="activeName">
                <el-tab-pane label="自定义数据" name="customer">
                    <!-- 首先我们来画个表单，这个大家都熟 -->
                    <el-form :model="tableForm" label-width="80px">
                        <el-form-item label="名称:">
                        <el-input v-model="tableForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="日期:">
                        <el-date-picker
                                v-model="tableForm.date"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                      </el-form-item>
                      <el-form-item label="类型:">
                        <el-select v-model="tableForm.type" placeholder="请选择类型">
                          <el-option label="动态表格1" value="0"></el-option>
                          <el-option label="动态表格2" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                        <el-form-item label="地址:">
                            <el-radio-group v-model="tableForm.address">
                              <el-radio label="1">李村大集</el-radio>
                              <el-radio label="2">花卉市场</el-radio>
                            </el-radio-group>
                          </el-form-item>
                    </el-form>
                </el-tab-pane>
                <!-- 这里是你从后台拉取的/自定义的默认数据 -->
                <el-tab-pane label="选用历史数据" name="default">
                    <el-table :data="checkData" ref="defaultTable" @selection-change="tableSelectionChange">
                        <template v-for="(item,index) in header">
                            <el-table-column v-if="item.prop == 'selection'" type="selection" :width="item.width"></el-table-column>
                            <el-table-column v-else-if="item.prop != 'options'" :label="item.label" :formatter="item.formatter?item.formatter:null" :prop="item.prop" :width="item.width">
                            </el-table-column>
                        </template>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <!-- 窗口操作按钮组 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="tableVisiable = false">取 消</el-button>
            <el-button type="primary" @click="confirmAdd">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 添加操作窗口  end-->
  </div>
</template>

首先我们看表格，表格我们采取表头自定义，然后循环出来，这样我们就可以在dialog中公用一个表头，有要求的同学也可以自己封装成一个表格来用。

export default {
  name: 'editTable',
  data() {
    return {
            tableVisiable:false,//弹窗展示状态
            activeName:'customer',//tab页切换名称
            //表格表头定义
            header :[
                {
                    prop: "selection",
                    width: "55"
                },
                {
                    prop: "name",
                    label: "名称",
                },
                {
                    prop: "date",
                    label: "日期",
                    width: "180",
                    formatter: ""
                },
                {
                    prop: "type",
                    label: "类型",
                    width: "180",
                    //表格属性，可以对数据进行过滤
                    formatter:item =>{
                        const statusMap = {
                            0: '动态表格1',
                            1: '动态表格2'
                        }
                        return statusMap[item.type]
                    }
                },
                {
                    prop: "address",
                    label: "地址",
                    formatter:item =>{
                        const statusMap = {
                            1: '李村大集',
                            2: '花卉市场'
                        }
                        return statusMap[item.address]
                    }
                },
                {
                    prop: "options",
                    label: "操作",
                    width: "200",
                    fixed: "right"
                }
            ],
            //我们从后台拉取的或者自定义的默认表格数据
            checkData:[
                {
                  date:'2017-06-21',
                  type:'0',
                  name:'默认数据1',
                  address:'1',
                  options:'',
                },
                {
                  date:'2017-05-20',
                  type:'1',
                  name:'默认数据2',
                  address:'2',
                  options:'',
                }
            ],
            //表格初始数据
            tableData: [{
              date:'2017-03-11',
              type:'1',
              name:'3',
              address:'1',
              options:'6',
            }],
            //表格选择绑定的数据
            multipleSelection:[],
            //表单绑定数据
            tableForm:{
                date:'2017-03-22',
                type:'0',
                name:'默认数据',
                address:'1',
                options:'',
            }
    }
  }
}
</script>

我们先来看初始表格

QQ截图20201029120259.png

我们通过header循环的时候，把操作按钮这一列区分出来，判断他是否是操作列，是的话我们给header数据里对应加上fixed选项，这个是把操作列固定在末尾，可以不影响视图变化情况下按钮缩进滚动条里。
然后我们这个基础表格不需要checkbox，所以判断去掉checkbox列。再加上表格的过滤方法，因为我们通过表单添加数据时，有单选，下拉框，返回值是数字，拉取后台数据也有可能会给你返回各种数字需要你做筛选过滤，所以我们要把它展示成中文，添加这个过滤方法就行了。
同理，我们dialog中的表格也是一样。上面说到，我们可以把表格封装成一个组件来调用，小伙伴儿们自行发挥。

QQ截图20201029130456.png
表单没什么好说的，大家都很熟，注意单选/下拉的值是字符串还是数字类型，统一即可。
我们看在methods里面的处理

 methods: {
        // 点击添加弹出配置窗口
    add() { 
      this.tableVisiable = true;//打开弹窗
    },
        //点击确认给表格配置参数
        confirmAdd(){
            //判断当前tab页面是自定义配置数据还是选择的默认数据
            if(this.activeName == 'customer') {
            //选择默认数据就直接把绑定的表单数据深拷贝之后添加到表格数据中即可
                let data = Object.assign({},this.tableForm)
                this.tableData.push(data);
            }else{
            //选择默认数据添加，利用es6语法...拷贝出选择的数据
                let data = [...this.multipleSelection];
           //concat：es6语法，链接两个数组，把选择的数据和原始表格数据合并到一起
                this.tableData = this.tableData.concat(data);
                //在选择默认数据，弹窗关闭后，要清除一下选中状态，要不然下次打开弹窗会发现上次选中的状态依然存在
                this.$refs.defaultTable.clearSelection();
            };
            this.tableVisiable = false;//最后关闭弹窗
        },
        // 删除行数
    handleDelete(index) {
      this.tableData.splice(index, 1)
    },
        // 保存提交你添加的内容
    save() {
            //保存数据后，处理一下提交 给后台。
            let data = JSON.stringify(this.tableData)
            this.$message({
                dangerouslyUseHTMLString: true,
                message: `<strong>${data}</strong>`
            });
    },
        //弹窗中表格数据选择后赋值给data中定义好的变量，用于添加行
        tableSelectionChange(val){
            this.multipleSelection = val;
        },
        //编辑操作
        edit(row){
            debugger
        },
        //删除操作
        deleteIt(row){
            debugger
        }
  }

在methods中进行的处理注释都有，这里不详细解释，我们要注意的是目前这些只是基于静态数据的处理，加上了异步请求之后，我们要自行添加loading等操作，给用户更好的用户体验。
希望这篇文章对大家有帮助，有不对或者代码不友好的地方多多指教。最后给大家呈上效果截图：
感觉对您有用的麻烦给个小心心，谢谢！

QQ截图20201029132040.png