【vue3+elementplus】el-table的操作列使用子组件渲染按钮,按钮权限改变,父给子传值,子组件的dom不更新的解决方案

起初是因为我使用了这个回答里面的组件去渲染表格操作列

需求:点击某个按钮,表格数据改变,按钮的权限也随着该数据变化而变化

问题:表格行数据变了,给子组件传的值也变了,在watch中也监听了,但是子组件的dom就是不更新

原因:重新获取表格数据,只是把表格数据改变了,但是表格组件的dom没有重新渲染,子组件的dom自然也不会重新渲染

解决:给子组件绑定一个key属性,值为随机数,这样每次表格数据变化,都会生成一个新的随机数,子组件就会重新渲染

<operate-btn
   :key="Math.random()"			// 原先这块我绑定的是id,当时表格数据变化直接就跳转了页面,再回来的时候页面已经刷新,所以按钮权限变化了,这次表格数据变化,不刷新页面,要求操作列也随着更新,bug就显现出来了   我也尝试过给v-if="true"  让他每次都重新渲染,但是不管用
   :buttons="[
     {
    
    
       isshow: true,
       text: '启用',
       click: () => handleEnable(row, 1),
       disabled: row.plan_status === 1 ? true : false,
     },
     {
    
    
       isshow: true,
       text: '禁用',
       click: () => handleEnable(row, 0),
       disabled: row.plan_status === 0 ? true : false,
     },
	]
/>

猜你喜欢

转载自blog.csdn.net/bbt953/article/details/131641044
今日推荐