vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue elementUI表格勾选回显

element UI 2.15.13与vue2.0表格勾选回显关键demo

作者:Tom_Li

这篇文章主要为大家介绍了element UI 2.15.13与vue2.0表格勾选回显关键demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

弹窗回显勾选的项

关键代码

// 函数名叫什么无所谓,函数的参数值 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>

以上就是element UI 2.15.13与vue2.0表格勾选回显关键demo的详细内容,更多关于element UI vue表格勾选回显的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文