element UI 2.15.13和 vue2.0表格勾选回显

弹窗回显勾选的项

关键代码

// 函数名叫什么无所谓，函数的参数值 data是要回显表格的所有数据
// 数据改变放在 this.$nextTick中
handleSelection(data) {
    this.$nextTick(() => {
        // selectedArr 是所有需要勾选的项的集合
        const selectedArr = data.filter(item => item.userId);
        selectedArr.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item);
        });
    });
},

完整代码

<template>
    <div class="base_table">
        <el-table
            ref="multipleTable"
            :data="tableData"
            >
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="序号"
                type="index"
                :index="indexMethod"
                width="60">
            </el-table-column>
        </el-table>
        <el-row :gutter="20">
            <el-col
                :span="12"
                :offset="6"
                ><div class="grid-content">
                    <el-button @click="$emit('handClose')">取消</el-button>
                    <el-button
                        type="primary"
                        @click="submit"
                        >确定</el-button
                    >
                </div></el-col
            >
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'base-table',
    props: {
        staffRow: {
            default: {},
        },
    },
    data() {
        return {
            loading: false,
            tableData: [],
        };
    },
    mounted() {
        this.form = { ...this.form, ...this.staffRow  };
        this.getJobList();
    },
    methods: {
        indexMethod(index) {
            return index + 1;
        },
        // 提交改变
        async submit() {
            this.loading = false;
            const url = '/user/info';
            const { code } = await this.$axios.post(url, {
                id: this.$props.staffRow.id,
            });
            this.loading = true;
            if (code === 200) {
                this.$message.success('操作成功');
                // 触发父组件的刷新
                this.$emit('handClose');
            }
        },
        // 获取表格的数据
         async getJobList() {
            let url = '/user/getInfo';
            let { code, data } = await this.$axios.get(url, {
                id: this.$props.staffRow.id,
            });
            if (code === 200 && data) {
                this.tableData = data.records || [];
                this.handleSelection(data.records);
            }
        },
        handleSelection(data) {
            this.$nextTick(() => {
                const selectedArr = data.filter(item => item.userId);
                selectedArr.forEach(item => {
                    this.$refs.multipleTable.toggleRowSelection(item);
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.base_table {
    height: 100%;
}
</style>