【vue】elemente-ui table toggleRowSelection 默认选择无效[已解决]-Toy模板网

这篇具有很好参考价值的文章主要介绍了【vue】elemente-ui table toggleRowSelection 默认选择无效[已解决]。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

点击按钮，弹出一个弹出框，内部出现一个table表，表内数据是动态获取，同时得勾选上几个table表的数据，类似以下的图
【vue】elemente-ui table toggleRowSelection 默认选择无效[已解决],vue,vue.js,ui,javascript

问题描述

点击按钮显示弹出框，加载table中的数据，默认选择table表数据失效

//template
<el-dialog :visible.sync="openDialog">
	<el-table ref="multipleTableRef" :data="aaa">
	        <el-table-column type="selection" width="55" align="center" />
	        <el-table-column label="aa" align="center" prop="aa"/>
	</el-table>
</el-dialog>
//methods
handleShowWechatList(){
	....
   requestxxxx().then(res=>{
      this.aaa=res;//table表的数据
      //this.bbb是table表中被默认选中的数据
      if(this.bbb.length>0){
        this.bbb.map(row=>{
           this.$refs.multipleTableRef.toggleRowSelection(row);
        })
      }
      this.openDialog=true;//显示弹出框
    })
....
},

原因分析：

原因一: table表数据aa 没有渲染完就调用toggleRowSelection方法

原因二: 使用this.$refs.multipleTableRef.toggleRowSelection选中数据源和table数据源不一样

原因三: 因为是弹出框，需要等弹出框渲染成功后才能进行在进行toggleRowSelection选中操作

解决方案：

提示：使用$nextTick()延迟执行toggleRowSelection方法，同时toggleRowSelection方法中的参数得跟table表的数据源一样

//template
<el-dialog :visible.sync="openDialog">
	<el-table ref="multipleTableRef" :data="aaa">
	        <el-table-column type="selection" width="55" align="center" />
	        <el-table-column label="aa" align="center" prop="aa"/>
	</el-table>
</el-dialog>

//methods
handleShowWechatList(){
....
  requestxxxx().then(res=>{
    this.aa=res;//table表中的数据
    this.openDialog=true;//显示弹出框
    //this.bbb是table表中被默认选中的数据
    // 渲染和被渲染的数据源得相同
    if(this.bb.length>0){
      for(let i in this.aa){
        for(let q in this.bb){
          if(this.bb[q]["id"] == this.aa[i]["id"]){
          //等dom渲染完成，延迟执行nextTick内部函数
            this.$nextTick(()=>{
                  this.$refs.multipleTableRef.toggleRowSelection(this.aa[i]);
            })
            break;
          }
        }
      }
    }
  })
....
},

✨ $\textcolor{gray}{踩坑不易，还希望各位大佬支持一下}$

📃 $\textcolor{green}{个人主页：}$ 沉默小管

📃 $\textcolor{green}{个人网站：}$ 沉默小管

📃 $\textcolor{green}{个人导航网站：}$ 沉默小管导航网

🔥 $\textcolor{green}{技术交流QQ群：837051545}$

👍 $\textcolor{green}{点赞，你的认可是我创作的动力！}$

⭐️ $\textcolor{green}{收藏，你的青睐是我努力的方向！}$

✏️ $\textcolor{green}{评论，你的意见是我进步的财富！}$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教文章来源地址https://www.toymoban.com/news/detail-716109.html