vue3 element table 插槽外的数据更新,插槽内的数据未更新。

在使用element table组件时候,有时候需要对table内部的header插槽进行单独的列的数据操作,比如在列头增加一个筛选功能,对指定范围的值进行一个筛选,需要对input的值进行v-model的绑定,对绑定的值进行清空时候,会出现无法更新视图的问题。

方法1:

对该表格的el-table标签增加一个key属性,那么每次进行操作的时候,直接对表格的key的index+1就会解决渲染问题。

<el-table :key="index"></el-table>

let index = 0;

const resetfunction = () =>{
	index = index + 1;
}

方法2:

增加一个初始值判断,每次进行操作的时候,对其进行true和false的赋值。类似第一种

方法3:

获取当前列的值,直接在按钮绑定传值,进行修改,

	//这里的item是渲染模板是循环出的列的数据。
   <el-button @click="resetbtn(item)">重置</el-button>
   const restBtn = (item) =>{
		item.name = '';
	}
	//直接对其重置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值