<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: [], // 顯隱數(shù)據(jù)
?? ??? ??? ??? ?title: "顯示/隱藏", // 彈出層標題
?? ??? ??? ??? ?open: false, // 彈出層顯示狀態(tài)
?? ??? ??? ?}
?? ??? ?},
?? ??? ?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>

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>