vue element-ui 实现el-table表格 多选以及回显

 
                    
                    
                    
                    
                    
                

1.选中获取当前列表信息

    handleInfaceSelectionChange(val) {
            this.apiIds = val.map(v => {
                return v.id
            })
        },

已知id回显

 Promise.all([getRoels()]).then((res) => {
                this.pageRoleData = res[0].data.data_list
                let checkedrow = []
                res[0].data.data_list.forEach(item => { // 后台返回的table数据源
                    row.role_ids.forEach(v => { 后台返回的回显id
                        if (item.id == v) {
                            checkedrow.push(item) // 相等添加到空数组中
                        }
                    })
                })
                this.$nextTick(() => {
                    checkedrow.forEach(row => {
                        this.$refs.multipleApiTable.toggleRowSelection(row, true) // 回显
                    })
                })
                this.roleLoading = false
            })
            this.data_id = row.id;
        },

关闭对话框清空选中信息

 resetRoleDialog() {
            this.$refs.multipleApiTable.clearSelection();
        },

你可能感兴趣的:(vue+element-ui,elementui,vue.js)