element-ui表格帶復選框使用方法及默認選中方法

一、實現多選:
步驟1：
在表格中添加一列

步驟2：
在data中定義以及數組用來存儲選中的元素。例如：multipleSelection:[]

selection-change方法用戶實時監聽選中元素

實現效果如下：

 

 

 

 

二、實現默認選中

在獲取表格數據時，添加如下方法，其中me.zclbList為獲取到的表格數據列表

// 獲取后台數據

    public mounted() {

        this.loadData();

    }

// 初始查詢
    public loadData() {
        // 提交獲取返回數據
        let that: any = this;
        AuditApi.getAuditItemList({status: 1}).then( (responseJSON: any) => {
            this.auditItemList = responseJSON;
            that.$nextTick(()=> {
                that.toggleSelection(that.auditItemList);
            });
        });
    }

 

定義ref="table",用來獲取該表格

public toggleSelection(rows: any) {
        let that: any = this;
        if (rows) {
            rows.forEach((item: any) => {
                //設置該表格選框選中
                that.$refs.table.toggleRowSelection(item);
            });
        } else {
            that.$refs.table.clearSelection();
        }
    }

 

即可實現默認選中。