如何改装element-ui表格，使之拥有增加和删除功能成为动态表格

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/theoneEmperor/article/details/80175942

       最近项目需要使用一个动态表格，使之拥有增加删除以及大表单的保存功能，界面框架定的是element-ui，仔细找了找，并没有现成的动态表格可以使用，没办法，只能开启改装之路。我的思路是这样的，就是在拿到后台数据时，在末尾在加上一个标记空数组，使之成为增加框，就可以了。这样就需要一个初始化的标记空数组，在没有数据的时候也会出现增加框。通过v-if以及v-else就可以实现基本的判断，具体代码如下

<el-table-column :formatter="row => row.xxx" label="xxx" width="300">
        <template slot-scope="scope" >
          <input size="mini" type="number" v-if="scope.row.add" v-model="scope.row.xxx"></input>
          <div v-else>{{scope.row.xxx}}</div>
        </template>
</el-table-column>

然后在拿数据的时候加个判断，如果有数据就接受数据，并在数据最后加上一样的空数组，但是还要加个add属性，如下：

const initData = {
  add: true,
  xxx: 'xxx'
}

删除功能的话，相对简单，表格会有自带的通过传入Index进行删除，具体看element-ui的表格文档，自己也可以用一些处理工具如：lodash等进行处理，在删除请求成功时进行调用就可以了。