【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动态添加行和列的大概思路,大家可以作为参考,再结合具体需求细化!!!不足之处请指出,谢谢

  • 5
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值