控制el-table的列显示隐藏

控制el-table的列显示隐藏，一般的话可以通过循环来实现，但是假如业务及页面比较复杂的话，list数组循环并不好用。

在我们的页面中el-table-column是固定的，因为现在是对现有的进行维护和迭代更新。

对需要控制列显示隐藏的页面进行控制。

1.封装的组件代码如下： 1.1 el-tooltip用于文字提示：不明白el-tooltip点击此处了解 1.2 el-row内3个按钮分别为form表单显示隐藏，页面刷新，控制列弹层。 1.3 el-transfer为打开的弹层（穿梭框）：不明白el-transfer点击此处了解 <template> <div class="top-right-btn" :style="style"> <el-row> <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"> <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" /> </el-tooltip> <el-tooltip class="item" effect="dark" content="刷新" placement="top"> <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" /> </el-tooltip> <el-tooltip class="item" 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 :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange" ></el-transfer> </el-dialog> </div> </template>  2.js代码： <script> export default { name: "RightToolbar", data() { return { // 显隐数据 value: [], // 弹出层标题 title: "显示/隐藏", // 是否显示弹出层 open: false, }; }, props: { showSearch: { type: Boolean, default: true, }, columns: { type: Array, }, search: { type: Boolean, default: true, }, gutter: { type: Number, default: 10, }, }, computed: { style() { const ret = {}; if (this.gutter) { ret.marginRight = `${this.gutter / 2}px`; } return ret; } }, created() { // 显隐列初始默认隐藏列 for (let item in this.columns) { if (this.columns[item].visible === false) { this.value.push(parseInt(item)); } } }, methods: { // 搜索 toggleSearch() { this.$emit("update:showSearch", !this.showSearch); }, // 刷新 refresh() { this.$emit("queryTable"); }, // 右侧列表元素变化 dataChange(data) { for (let item in this.columns) { const key = this.columns[item].key; this.columns[item].visible = !data.includes(key); } }, // 打开显隐列dialog showColumn() { this.open = true; }, }, }; </script> 3.页面样式如下两图所示：

左边为页面的三个按钮，下面为弹层样式（一眼知道蒸馍操作了哦）

4.在data中·定义变量

用于控制form表单显示隐藏的showSearch，以及table的列名的数组columns：

data() { return { showSearch:true, columns: [ { key: 0, label: `多选列`, visible: true }, { key: 1, label: `序号列`, visible: true }, { key: 2, label: `库存编号`, visible: true }, { key: 3, label: `库区名称`, visible: true }, { key: 4, label: `状态`, visible: true }, { key: 5, label: `平台仓库`, visible: true }, { key: 6, label: `负责人`, visible: true }, { key: 7, label: `拣货方式`, visible: true }, { key: 8, label: `库区类型`, visible: true }, { key: 9, label: `操作`, visible: true }, ], 5.在页面中引入使用：

（搞成全局的就不用一个个引入了）

<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" />

其中showSearch和colums上面讲了，还有一个getList就是页面获取数据的函数

6.对搜索和列进行显示隐藏：

对需要显示隐藏的列加上如下就行，并且和定义的columns设定的key需要一致哦。

if="columns[num].visible" 表单： <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> btn按钮： <el-button icon="el-icon-search" size="small" @click="handleQuery" v-show="showSearch">搜索</el-button> <el-button icon="el-icon-refresh-left" size="small" @click="resetQuery" class="white_black2" v-show="showSearch">重置</el-button> 需要控制显示隐藏的el-table-column列： <el-table-column prop="branchName" align="center" label="平台仓库" v-if="columns[5].visible"></el-table-column> 控制el-talbe列的显示隐藏完成。