vue implements custom table tool extension

<template>
    <div class="right-btn">
        <el-row>
            <el-tooltip
                effect="dark"
                :content="showSearch? 'Hide Search': 'Show Search'"
                placement="top"
            >
                <el-button 
                    size="mini" 
                    circle 
                    icon="el-icon-search"
                    @click="toggleSearch()" 
                />
            </tooltip>
            <el-tooltip
                effect="dark"
                content="refresh"
                placement="top"
            >
                <el-button 
                    size="mini"
                    circle
                    icon="el-icon-refresh"
                    @click="refresh()"
                />
            </el-tooltip>
            <el-tooltip
                effect="dark"
                content="Open column"
                placement="top"
                v-if="columns"
            >
                <el-button 
                    size="mini"
                    circle
                    icon="el-icon-menu"
                    @click="showColumn()"
                />
            </el-tooltip>
        </el-row>

        // The visible column dialog box        <el-dialog
            :title="title"
            :="open"
            append-to-body
        >
            <el-transfer
                :title="['Show', 'Hide']"
                v-model="value"
                :data="columns"
                @change="changeData"
            ></el-transfer>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'RightToolbar',
        data () {
            return {
                value: [], // visible and hidden data                title: "Show/Hide", // Pop-up layer title                open: false, // The pop-up layer displays the status            }
        },
        prop: {
            showSearch: {
                type: Boolean,
                default: true
            },
            columns: {
                type: Array
            }
        },

        created () {
            // The column is hidden in the initial default column            for (let item in ) {
                if ([item].visible === false) {
                    (parseInt(item))
                }
            }
        }
        methods: {
            // search            toggleSeach () {
                this.$emit('update:showSeach', !);
            },
            // refresh            refresh () {
                this.$emit('queryTable');
            },
            // Open the visible column dialog box            showColumn (){
                  = true;
             },
             // Changes to the list element on the right             changeData (data) {
                 for (var item in ) {
                     const key = [item].key;
                     [item].visible = !(key);
                 }
             }
        }
    }
</script>

import RightToolbar from '@/components/RightToolbar';

// Global component mount('RightToolbar', RightToolbar);

<template>
    <div class="index">
        <el-form v-show="showSearch"></el-form>
        <right-toolbar
            :="showSearch"
            @queryTable="getList"
            :columns="columns"
        >
        <right-toolbar>
        <el-table>
            <el-table-column label="User Number" v-if="columns[0].visible"></el-table-column>
            <el-table-column label="User Name" v-if="columns[1].visible"></el-table-column>
            <el-table-column label="User Nickname" v-if="columns[2].visible">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // Show search criteria                showSearch: true,
                // Column information                columns: [
                    {key: 0, label: 'User number', visible: true},
                    {key: 1, label: 'User Name', visible: true},
                    {key: 2, label: 'User Nickname', visible: true}
                    // ...
                ]
            }
        },
        created () {
            ();
        },
        // Query        getList () {
            // Call the interface        }
    }
</script>