【vue】el-table实现动态添加行和列

实现思路：
最近遇到一个动态增加行和列的需求，本来拿到需求的时候想用el-table中自带的方法去实现的，但是经过尝试发现不能满足想要实现的需求。没办法只能在el-table的基础上自己写原生。
大概思路如下：
1.首先把table中需要动态增加的行和列分开，分别定义一个数组dataList存放新增行数据，定义数组columnList存放新增列数据。
2.其次在指定列的数据前面加新增按钮，点击新增按钮的时候请求接口拿到数据。
3.然后把拿到的数据处理，把表格内容的数据push到dataList中，把表头内容数据push到columnList中。注意如果接口没有返回表头数据，则需要自己根据具体需求创造对应列的key-value存入columnList中。
(1)行可以直接添加在现有行后面展示，也可以在指定行的后面新增行。比如：在第一行后面新增行，则使用splice添加。splice(指定行,0,添加的新行数据)
(2)点击哪行则在哪行后面添加新行。思路：获取到当前点击行的索引，使用splice添加。splice(指定行,0,添加的新行数据)
4.最后把dataList给el-table的:data=”dataList”使用，columnList给使用
5.以上是新增行和列的思路。如果想删除行和列的话，则需要通过splice或slice操作dataList和columnList即可。删除指定的索引位置。
大致代码如下：

<el-table :data="dataList"><el-table-column label="姓名" prop="name"></el-table-column><!--动态列--><el-table-column v-for="(it, index) in columnList" :key="index" :label="it.label"><!--动态行--><template slot-scope="scope"><i class="el-icon-circle-plus-outline" @click="handleAddRow(scope.row, scope.$index)" /><span>{{scope.row.value}}</span>// 根据项目需求进行其他逻辑处理</template></el-table-column></el-table>export default {data() {return {dataList: [], // 表格数据columnList: [], //表头数据}},methods: {// 动态增加行async handleAddRow(row, index) {const data = await this.接口()data.forEach(d => {// 列添加this.columnList.push({ label: '年龄' })// 行添加this.dataList.splice(index, 0, d)})}}}

结语：以上是el-table动态添加行和列的大概思路，大家可以作为参考，再结合具体需求细化！！！不足之处请指出，谢谢