<el-table
                    v-loading="roleInfaceLoading"
                    ref="multipleApiTable"
                    :data="data"
                    tooltip-effect="dark"
                    row-key="id"
                    style="width: 100%"
                    @selection-change="handleInfaceSelectionChange"
                >
                    <el-table-column :reserve-selection="true" align="center" type="selection" width="100"></el-table-column>
                    <el-table-column align="center" prop="name" label="接口名称">
                    </el-table-column>
                    <el-table-column align="center" prop="path" label="接口路径">
                    </el-table-column>
                </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();
        },

Logo

前往低代码交流专区

更多推荐