快捷導(dǎo)航

vue實(shí)現(xiàn)自定義表格工具擴(kuò)展

更新時(shí)間：2022年04月12日 08:31:10 作者：$愛的陪伴

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue自定義表格工具擴(kuò)展的具體代碼，供大家參考，具體內(nèi)容如下

工具組件

<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: "顯示/隱藏", // 彈出層標(biāo)題
?? ??? ??? ??? ?open: false, // 彈出層顯示狀態(tài)
?? ??? ??? ?}
?? ??? ?},
?? ??? ?prop: {
?? ??? ??? ?showSearch: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: true
?? ??? ??? ?},
?? ??? ??? ?columns: {
?? ??? ??? ??? ?type: Array
?? ??? ??? ?}
?? ??? ?},

?? ??? ?created () {
?? ??? ??? ?// 顯隱列初始默認(rèn)隱藏列
?? ??? ??? ?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;
??? ??? ??? ?},
??? ??? ??? ?// 右側(cè)列表元素變化
??? ??? ??? ?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="用戶編號(hào)" 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: '用戶編號(hào)', visible: true},
?? ??? ??? ??? ??? ?{key: 1, label: '用戶名稱', visible: true},
?? ??? ??? ??? ??? ?{key: 2, label: '用戶昵稱', visible: true}
?? ??? ??? ??? ??? ?// ...
?? ??? ??? ??? ?]
?? ??? ??? ?}
?? ??? ?},
?? ??? ?created () {
?? ??? ??? ?this.getList();
?? ??? ?},
?? ??? ?// 查詢
?? ??? ?getList () {
?? ??? ??? ?// 調(diào)用接口
?? ??? ?}
?? ?}
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: