首页 > 其他 > 详细

element-ui表格带复选框使用方法及默认选中方法

时间:2019-12-02 14:41:23      阅读:1665      评论:0      收藏:0      [点我收藏+]

一、实现多选:
步骤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();
        }
    }

 

即可实现默认选中。

技术分享图片

 

 

 

element-ui表格带复选框使用方法及默认选中方法

原文:https://www.cnblogs.com/ll15888/p/11970445.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!