快捷導(dǎo)航

element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo

更新時(shí)間：2023年11月21日 11:13:34 作者：Tom_Li

這篇文章主要為大家介紹了element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

彈窗回顯勾選的項(xiàng)

關(guān)鍵代碼

// 函數(shù)名叫什么無(wú)所謂，函數(shù)的參數(shù)值 data是要回顯表格的所有數(shù)據(jù)
// 數(shù)據(jù)改變放在 this.$nextTick中
handleSelection(data) {
    this.$nextTick(() => {
        // selectedArr 是所有需要勾選的項(xiàng)的集合
        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="序號(hào)"
                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('操作成功');
                // 觸發(fā)父組件的刷新
                this.$emit('handClose');
            }
        },
        // 獲取表格的數(shù)據(jù)
         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表格勾選回顯關(guān)鍵demo的詳細(xì)內(nèi)容，更多關(guān)于element UI vue表格勾選回顯的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: