element-ui table 行选中

Element UI：Dialog中表格数据预选中技巧

最新推荐文章于 2023-08-10 22:55:24 发布

原创最新推荐文章于 2023-08-10 22:55:24 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

element-ui

4 篇文章

订阅专栏

本文详细介绍了如何在Element UI的Dialog组件中，利用定时器和$refs来实现表格数据的预选中功能。通过遍历数据源，对比客户端密钥，实现特定行的选择，有效提升用户体验。

<el-dialog title="修改" :visible.sync="dialogVisibleEdit" width="30%" :before-close="handleCloseEdit">
    <el-table ref="multipleTable" 
        :data="tvTableData" border 
         style="width: 100%" size="mini">
       <el-table-column :selectable="seeSelectable" align="center" type="selection" width="55"> 
       </el-table-column>
       <el-table-column align="center" prop="clientName" label="客户端名称"></el-table-column>
    </el-table>
</el-dialog>

setTimeout(() => {
    this.tvTableData.forEach((item,i) => {
        this.slcdTvList.forEach((item2) => {
           if(item.clientKey == item2.clientKey){
              this.$refs.multipleTable.toggleRowSelection(this.tvTableData[i],true)
           }
        })
     })
},1000)

因为用到dialog，所以使用定时器，在dom加载后通过$refs来获取表格，然后更新