vue自定义表格工具扩展
$爱的陪伴 人气:0工具组件
<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>
加载全部内容