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

 更新时间:2023年11月21日 11:13:34   作者: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表格勾选回显的资料请关注脚本之家其它相关文章!

相关文章

  • vue $mount 和 el的区别说明

    vue $mount 和 el的区别说明

    这篇文章主要介绍了vue $mount 和 el的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 基于Vue2.0和Typescript实现多主题切换的示例

    基于Vue2.0和Typescript实现多主题切换的示例

    本文主要介绍了基于Vue2.0和Typescript实现多主题切换的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue引入Stylus知识点总结

    Vue引入Stylus知识点总结

    在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容,有需要的朋友们可以学习参考下。
    2020-01-01
  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    这篇文章主要给大家介绍关于前端Vue3父子组件传参有关sync修饰符的用法详细解析,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-09-09
  • Vue实现一个无限加载列表功能

    Vue实现一个无限加载列表功能

    这篇文章主要介绍了Vue实现一个无限加载列表功能,需要的朋友可以参考下
    2018-11-11
  • Vue3实现九宫格抽奖的示例代码

    Vue3实现九宫格抽奖的示例代码

    这篇文章主要为大家详细介绍了如何利用Vue3实现九宫格抽奖的功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下
    2022-09-09
  • 解决Vue 移动端点击出现300毫秒延迟的问题

    解决Vue 移动端点击出现300毫秒延迟的问题

    这篇文章主要介绍了解决Vue 移动端点击出现300毫秒延迟的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中的Object.freeze() 优化数据方式

    vue中的Object.freeze() 优化数据方式

    这篇文章主要介绍了vue中的Object.freeze()优化数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 解决ElementUI中tooltip出现无法显示的问题

    解决ElementUI中tooltip出现无法显示的问题

    这篇文章主要介绍了解决ElementUI中tooltip出现无法显示的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 详解vue-cli3 中跨域解决方案

    详解vue-cli3 中跨域解决方案

    这篇文章主要介绍了vue-cli3 中跨域解决方案,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04

最新评论