ElementUI饿了么el-table复选框multipleTable回显高亮问题解决Vue2

m0_56923305

已于 2024-09-25 15:31:52 修改

阅读量121

点赞数 1

文章标签： elementui javascript vue.js

于 2024-09-25 15:27:53 首次发布

本文链接：https://blog.csdn.net/m0_56923305/article/details/142524370

版权

1、看了别的文章说要回显的row数据一定要在已经渲染的表格上拿，或者在表格加上属性 :row-key="(row) => { return row.id }"，在多选的column标签加上 :reserve-selection="true"开启，我是这样就可以实现
workDisciplineTarget是已经渲染的表格数据

this.$refs.multipleTable.toggleRowSelection(targetRow, true);是官方的方法true是一定要传的参数

表格源码：

//表格 
<el-table
            ref="multipleTable"
            :cell-style="{ 'text-align': 'center'}"
            :header-cell-style="{'text-align':'center','background-color':'#fafafa'}"
            :border="true"
            :data="workDisciplineTarget"
            tooltip-effect="dark"
            style="width: 90%"
            @selection-change="handleSelectionChange"
        >
         <!-- :row-key="getRowKeys" -->
            <!-- :reserve-selection="true" -->
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="sort" label="排序" width="100"></el-table-column>
            <el-table-column  prop="evaluateTarget" label="评价目标" width="200"></el-table-column>
            <el-table-column  prop="description" label="评价标准"></el-table-column>
             <!-- show-overflow-tooltip -->
        </el-table>
//js
 handleSelectionChange(rows) {
            this.multipleSelection = rows;
        },
        getTableData(){
                getAction('/discipline?templateId='+`${this.templateId}`+'&workType='+`${this.workType}`).then(res=>{
                    if(res.success){
                            // 清空当前选择
                            this.$refs.multipleTable.clearSelection();
                            // 选中在 requestTabledataEcho 中存在的行
                            res.result.forEach(key => {
                                const targetRow = this.workDisciplineTarget.find(row => row.sort === key.sort);
                                if (targetRow) {
                                    this.$refs.multipleTable.toggleRowSelection(targetRow, true); // 选中该行
                                }
                            });

                    }else{
                        this.$message.error(res.message)
                    }

                })
        },