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

本文主要是介绍如何改装element-ui表格，使之拥有增加和删除功能成为动态表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近项目需要使用一个动态表格，使之拥有增加删除以及大表单的保存功能，界面框架定的是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等进行处理，在删除请求成功时进行调用就可以了。

这篇关于如何改装element-ui表格，使之拥有增加和删除功能成为动态表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---