vue+elementUI-el-table實現(xiàn)動態(tài)顯示隱藏列方式

更新時間：2023年01月13日 15:51:10 作者：一塵不染的白

這篇文章主要介紹了vue+elementUI-el-table實現(xiàn)動態(tài)顯示隱藏列方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

elementUI-el-table動態(tài)顯示隱藏列

在實際工作場景中，我們在展示數(shù)據(jù)時，會遇到展示數(shù)據(jù)過多此時會將數(shù)據(jù)分頁展示，但是如果數(shù)據(jù)列展示過多，會造成每列數(shù)據(jù)相對比較擁擠，并且所有的列數(shù)據(jù)不一定都是必須展示的。

可以將其先隱藏，用戶需要時才將其顯示在列表之中。所以本文章結合vue+elementUI--中的el-table以及分頁實現(xiàn)表格列的動態(tài)隱藏與顯示。

實現(xiàn)思路：將表格展示+分頁+顯示/隱藏列組件化，其中利用slot動態(tài)展示不同的表格數(shù)據(jù)，父組件引用此組件傳遞相應切必須的參數(shù)，當分頁或顯示/隱藏列動態(tài)變化時將數(shù)據(jù)再返回父組件，父組件中的列根據(jù)回傳的數(shù)據(jù)利用v-if實現(xiàn)列的顯示與隱藏（此代碼為第一版?。?/p>

主要代碼如下

子組件（trendsTable.vue）主要代碼：

<!-- create by crystalSong 分頁+table+動態(tài)設置表格列的隱藏與顯示 -->
<template>
? <div class='trends_container'>
? ? ? <div class="table_container">
? ? ? ? ? ? <el-table ref="trendsTable" :data="tableList" fit stripe style="width: 100%" border
? ? ? ? ? ? @selection-change="handleSelectionChange">
? ? ? ? ? ? ? ? <slot></slot>//此處用于列表靈活展示
? ? ? ? ? ? </el-table>
? ? ? </div>
? ? ? <div class="pagination_trends_wrap">
? ? ? ? ? ? <div class="trends_oprt_wrap">
//將所有列展示在此，可以點擊進行隱藏與顯示
? ? ? ? ? ? ? ? <el-popover placement="top-start" width="280" trigger="click">
? ? ? ? ? ? ? ? ? ? <div class="trends_btn_wrap">
? ? ? ? ? ? ? ? ? ? ? ? <el-checkbox-group v-model="visibleList" size="small" @change="visibleListChange">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-checkbox?
? ? ? ? ? ? ? ? ? ? ? ? ? ? v-for="(col, index) in columnList" :key="index"
? ? ? ? ? ? ? ? ? ? ? ? ? ? :label="col.label"
? ? ? ? ? ? ? ? ? ? ? ? ? ? border
? ? ? ? ? ? ? ? ? ? ? ? ? ? >{{col.value}}</el-checkbox>
? ? ? ? ? ? ? ? ? ? ? ? </el-checkbox-group>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <el-button slot="reference" size="small">隱藏/顯示列</el-button>
? ? ? ? ? ? ? ? </el-popover>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="pagination_wrap" v-if="total > 0">
//分頁區(qū)域
? ? ? ? ? ? ? ? <template>
? ? ? ? ? ? ? ? ? ? <el-pagination style="text-align: right;" @size-change="handleSizeChange"
? ? ? ? ? ? ? ? ? ? @current-change="handleCurrentChange" :current-page.sync="currentPage"
? ? ? ? ? ? ? ? ? ? :page-sizes="[10,25,50,100]" :page-size.sync="currentSize"
? ? ? ? ? ? ? ? ? ? layout="total, sizes, prev, pager, next, jumper" :total="total" background>
? ? ? ? ? ? ? ? ? ? </el-pagination>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </div>
? ? ? </div>
? </div>
</template>

<script>
? export default {
? ? name: 'trendsTable',
? ? props: {
? ? ? ? tableList:{//列表數(shù)據(jù)
? ? ? ? ? ? type: Array,
? ? ? ? ? ? require: true,
? ? ? ? ? ? default: _ => []
? ? ? ? },
? ? ? ? hideColumnIndexs:{//需要隱藏的列的下標即表格數(shù)據(jù)的序號從0開始
? ? ? ? ? ? type: Array,
? ? ? ? ? ? default: _ => []
? ? ? ? },
? ? ? ? pageSize:{//每頁幾條數(shù)據(jù)
? ? ? ? ? ? type:Number,
? ? ? ? ? ? default:10,
? ? ? ? },
? ? ? ? pageNumber:{//當前頁碼
? ? ? ? ? ? type:Number,
? ? ? ? ? ? default:1,
? ? ? ? },
? ? ? ? total:{//總數(shù)據(jù)條數(shù)
? ? ? ? ? ? required: true,
? ? ? ? ? ? type:Number,
? ? ? ? ? ? default:0,
? ? ? ? },
? ? },
? ? components: {},
? ? data() {
? ? ? ? return {
? ? ? ? ? ? visibleList:[],//顯示/隱藏列的選中下標數(shù)據(jù)集合
? ? ? ? ? ? columnList:[],//表格所有列名稱數(shù)據(jù)列表
? ? ? ? };
? ? },
? ? created() {
? ? ? ??
? ? },
? ? mounted() {
? ? ? ? let _this = this;
? ? ? ? var curHideList = [];
//頁面初始化：動態(tài)獲取表格有用的所有列生成并放入復選列表并記錄初始隱藏列
? ? ? ? this.$refs.trendsTable.$children.forEach((obj,index) => {?
? ? ? ? ? ? if(obj.type){
? ? ? ? ? ? ? ? _this.columnList.push(
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? 'label':index,
? ? ? ? ? ? ? ? ? ? ? ? 'value':obj.type == 'selection' ? '選擇' : obj.label,
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? // 記錄初始展示的列
? ? ? ? ? ? ? ? if (_this.hideColumnIndexs.indexOf(index) === -1) {
? ? ? ? ? ? ? ? ? ? _this.visibleList.push(index)
? ? ? ? ? ? ? ? ? ? curHideList[index] = false;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? curHideList.push(true);
? ? ? ? ? ? ? ? } ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? });
//此向父組件傳遞列是否隱藏的數(shù)組
? ? ? ? _this.$emit('getHideColist',curHideList);
? ? },
? ? methods: {
? ? ? ?visibleListChange(item){
? ? ? ? ? ? // console.log('change',item)
? ? ? ? ? ? var curHideList = [];
? ? ? ? ? ? this.columnList.forEach((obj,index) => {?
? ? ? ? ? ? ? ? curHideList[index] = false;
? ? ? ? ? ? ? ? // 更改顯示隱藏列
? ? ? ? ? ? ? ? if (item.indexOf(index) === -1) {
? ? ? ? ? ? ? ? ? ? curHideList[index] = true;
? ? ? ? ? ? ? ? }?
? ? ? ? ? ? });
? ? ? ? ? ? this.$emit('getHideColist',curHideList);
? ? ? ? },
? ? },
? ? computed: {
?
? ? },
? ? watch: {},
? }
</script>
<style lang='less' scoped>
? ? .trends_container{
? ? ? ? .pagination_trends_wrap{
? ? ? ? ? ? margin: 20px 0;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .trends_oprt_wrap{
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? vertical-align: top;
? ? ? ? ? ? width: 100px;
? ? ? ? }
? ? ? ? .pagination_wrap{
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? vertical-align: top;
? ? ? ? ? ? width: calc(100% - 105px);
? ? ? ? ? ? margin: 0 !important;
? ? ? ? }
? ? }
</style>
<style lang="less">
? ? .trends_btn_wrap{
? ? ? ? .el-checkbox-group{
? ? ? ? ? ? label{
? ? ? ? ? ? ? ? margin: 0 !important;
? ? ? ? ? ? ? ? margin: 0 10px !important;
? ? ? ? ? ? ? ? margin-bottom: 15px !important;
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? .table_container .el-table .cell{
? ? ? ? text-overflow: initial !important;
? ? }
</style>

引用此組件時主要代碼：

// 引入-table-組件
import TrendsTable from "@/components/trendsTable.vue";

主要代碼就是根據(jù)子組件返回的數(shù)組利用v-if進行判斷

<trends-table :tableList="onrenewalTableList"
? ? ? ? ? ? ? ? ? ? :hideColumnIndexs='[]' ref="trendtable"
? ? ? ? ? ? ? ? ? ? :pageSize.sync="onrenewalForm.pageSize"
? ? ? ? ? ? ? ? ? ? :pageNumber.sync="onrenewalForm.pageNumber"
? ? ? ? ? ? ? ? ? ? :total="mbePageTotal"
? ? ? ? ? ? ? ? ? ? @getHideColist="getHideColist"
? ? ? ? ? ? ? ? ? ? @pagination = "paginationHadle"
? ? ? ? ? ? ? ? ? ? @selection-change="handleSelectionChange"
? ? ? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? ? <el-table-column
? ? ? ? ? ? ? ? ? ? ? ?v-if="!columnHideList[0]"
? ? ? ? ? ? ? ? ? ? ? ? type="selection"
? ? ? ? ? ? ? ? ? ? ? ? width="55">
? ? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? ? <el-table-column
? ? ? ? ? ? ? ? ? ? ? ? v-if="!columnHideList[1]"
? ? ? ? ? ? ? ? ? ? ? ? type="index"
? ? ? ? ? ? ? ? ? ? ? ? label="序號"
? ? ? ? ? ? ? ? ? ? ? ? width="50">
? ? ? ? ? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ? ? ? {{ (onrenewalForm.pageNumber - 1) * onrenewalForm.pageSize + (scope.$index + 1)}}
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? <el-table-column prop="codeNo" label="序列號" v-if="!columnHideList[2]"> </el-table-column>
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? <el-table-column prop="proName" label="產(chǎn)品" v-if="!columnHideList[3]"> </el-table-column>
? ? ? ? ? ? ? ? ? ? ? <el-table-column prop="proPrice" label="產(chǎn)品定價" width="100px" v-if="!columnHideList[4]">
? ? ? ? ? ? ? ? ? ? ? ? <template slot-scope="{row}">
? ? ? ? ? ? ? ? ? ? ? ? ? <span >{{row.proPrice / 100 | numFormat(2)}}</span>
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? <el-table-column prop="activeTime" label="激活時間" v-if="!columnHideList[5]">
? ? ? ? ? ? ? ? ? ? ? ? <template slot-scope="{row}">
? ? ? ? ? ? ? ? ? ? ? ? ? <span >{{ row.activeTime | parseTime('{y}-{m}-wppm3vysvbp {h}:{i}:{s}') }}</span>
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? </trends-table>

主要就是利用el-table組件此處就做了序號，多選如果需要更多操作可以自定義擴展。