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 = '';}//直接对其重置