vue实现自定义表格工具扩展

Jamina ·

更新时间:2024-11-10

· 1968 次阅读

本文实例为大家分享了vue自定义表格工具扩展的具体代码，供大家参考，具体内容如下

工具组件

<template>
    <div class="right-btn">
        <el-row>
            <el-tooltip
                effect="dark"
                :content="showSearch ? '隐藏搜索' : '显示搜索'"
                placement="top"
            >
                <el-button 
                    size="mini" 
                    circle 
                    icon="el-icon-search"
                    @click="toggleSearch()" 
                />
            </tooltip>
            <el-tooltip
                effect="dark"
                content="刷新"
                placement="top"
            >
                <el-button 
                    size="mini"
                    circle
                    icon="el-icon-refresh"
                    @click="refresh()"
                />
            </el-tooltip>
            <el-tooltip
                effect="dark"
                content="显隐列"
                placement="top"
                v-if="columns"
            >
                <el-button 
                    size="mini"
                    circle
                    icon="el-icon-menu"
                    @click="showColumn()"
                />
            </el-tooltip>
        </el-row>
        // 显隐列对话框
        <el-dialog
            :title="title"
            :visible.sync="open"
            append-to-body
        >
            <el-transfer
                :title="['显示', '隐藏']"
                v-model="value"
                :data="columns"
                @change="changeData"
            ></el-transfer>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'RightToolbar',
        data () {
            return {
                value: [], // 显隐数据
                title: "显示/隐藏", // 弹出层标题
                open: false, // 弹出层显示状态
            }
        },
        prop: {
            showSearch: {
                type: Boolean,
                default: true
            },
            columns: {
                type: Array
            }
        },
        created () {
            // 显隐列初始默认隐藏列
            for (let item in this.columns) {
                if (this.columns[item].visible === false) {
                    this.value.push(parseInt(item))
                }
            }
        }
        methods: {
            // 搜索
            toggleSeach () {
                this.$emit('update:showSeach', !this.showSearch);
            },
            // 刷新
            refresh () {
                this.$emit('queryTable');
            },
            // 打开显隐列对话框
            showColumn (){
                 this.open = true;
             },
             // 右侧列表元素变化
             changeData (data) {
                 for (var item in this.columns) {
                     const key = this.columns[item].key;
                     this.columns[item].visible = !data.includes(key);
                 }
             }
        }
    }
</script>

在main.js全局注册工具组件

import RightToolbar from '@/components/RightToolbar';
// 全局组件挂载
Vue.component('RightToolbar', RightToolbar);

其他页面引入工具组件

<template>
    <div class="index">
        <el-form v-show="showSearch"></el-form>
        <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
            :columns="columns"
        >
        <right-toolbar>
        <el-table>
            <el-table-column label="用户编号" v-if="columns[0].visible"></el-table-column>
            <el-table-column label="用户名称" v-if="columns[1].visible"></el-table-column>
            <el-table-column label="用户昵称" v-if="columns[2].visible">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                // 显示搜索条件
                showSearch: true,
                // 列信息
                columns: [
                    {key: 0, label: '用户编号', visible: true},
                    {key: 1, label: '用户名称', visible: true},
                    {key: 2, label: '用户昵称', visible: true}
                    // ...
                ]
            }
        },
        created () {
            this.getList();
        },
        // 查询
        getList () {
            // 调用接口
        }
    }
</script>

VUE 自定义表格扩展工具

1024 个赞