el-table根据返回数据回显选择复选框

最新推荐文章于 2024-07-26 11:21:54 发布

鱼空

最新推荐文章于 2024-07-26 11:21:54 发布

阅读量917

点赞数 9

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/m0_69502730/article/details/134683834

版权

接口给你返回一个集合，然后如果这个集合里面的status==2，就把这一行的复选框给选中

注意：

绑定的ref
:row-key="getRowKeys"

this.$refs.multiTableInst.toggleRowSelection(this.list[i], true);

 <el-table :data="list" ref="multiTableInst" style="width: 100%" header-cell-class-name="approve-thead" class="approval-table" @select="getSelection" @select-all="getSelectionAll" :row-key="getRowKeys">
            <el-table-column type="selection" width="55"> </el-table-column>
</el-table>



<script>
export default {

    data() {
        return { 
            list: [], 
        };
    },
    created() {
        this.getAccountListmeth();
    },
    methods: {
        getRowKeys(row) {
            //唯一值，一般都是id 
            return row.code;
        }, 
        // 获得列表
        async getAccountListmeth() { 
            this.$nextTick(() => { 
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].status == 2) { 
                        this.$refs.multiTableInst.toggleRowSelection(this.list[i], true);
                    }else{
                        this.$refs.multiTableInst.toggleRowSelection(this.list[i], false);  }
                } 
            });
        },