elementUI el-table 表格实现手动选择展示列

一、使用场景:在使用elementui开发表格功能的时候,我们会遇到表格字段列数过多的情况,这时我们就需要对其进行设置,选择是否展示列,默认展示多少列,还有就是到处表格数据的时候,我们可以指定选择列到处,这样

一、使用场景:在使用elementui开发表格功能的时候,我们会遇到表格字段列数过多的情况,这时我们就需要对其进行设置,选择是否展示列,默认展示多少列,还有就是到处表格数据的时候,我们可以指定选择列到处,这样体验方面是很好的。

二、效果展示:点击操作按,展开筛选类选项

三、实现思路:

(1)表格默认展示所有字段,每个字段通过 v-if 属性来进行判断是否显示;
(2)点击表格最后一列表头(操作栏),弹出选择框;【el-popover】
(3)选择框中包括:全选复选框、所有字段复选框组、取消按钮、确定按钮;【el-checkbox-group】
(4)选择字段值后,点击“确定”按钮:
(5)更新每个字段值的show属性(true / false),选中当前表格所展示的字段;重新渲染表格;

四、实现代码:实现分页,筛选效果,展示数据。

1、前端代码

<template>
    <div>
         <!-- 卡片视图区域 -->
         <el-card class="box-card">
        <el-table :data="tableData" border stripe @selection-change="handleSelectionChange" class="table-container" v-loading="listLoading">

            <el-table-column align="left" v-if="showColumn('id')" label="ID" prop="id" min-width="100" />
            <el-table-column align="left" v-if="showColumn('name')" label="名称" prop="name" min-width="150" />
            <el-table-column align="left" v-if="showColumn('money')" label="优惠金额" prop="money" min-width="150" />
            <el-table-column align="left" v-if="showColumn('created_at')" label="添加时间" prop="created_at" min-width="150" />
            <el-table-column align="left" v-if="showColumn('updated_at')" label="最近修改" prop="updated_at" min-width="180" />
            <el-table-column align="center" label="操作" min-width="150" fixed="right">
                <template slot="header" slot-scope="scope">
                    <el-popover width="200" popper-class="tablePopover" trigger="manual" ref="tablePopover" v-model="popoverVisible" @show="showPopover">
                        <span slot="reference" @click="openPopover">操作<i class="el-icon-arrow-down" style="font-weight: bold;" /></span>
                        <div class="popoverCheckBoxArea">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            <div style="margin: 10px 0;"></div>
                            <el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange">
                                <el-checkbox v-for="column in columns" :label="column.value" :key="column.value">{{column.text}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="popoverCheckBoxButton">
                            <el-button size="mini" @click="canclePopover">取消</el-button>
                            <el-button type="primary" size="mini" @click="confirmPopover">确定</el-button>
                        </div>
                    </el-popover>
                </template>
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="removeAdById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <!-- 分页区域 -->
         <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[3,500,5000,10000,50000]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
    </el-card>
    </div>
</template>

2、js代码:

<script>
    export default {
        data(){
            return{
                // data中定义的变量
                listLoading: false,
                tableData: [],
                // 获取飞猪门票管理新列表的参数对象
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 3
                },
                total: 0,
                // 选择展示的字段数组
                columns: [
                    { text: 'ID', value: 'id', show: true },
                    { text: '名称', value: 'name', show: true },
                    { text: '优惠金额', value: 'money', show: true },
                    { text: '添加时间', value: 'created_at', show: true },
                    { text: '最近修改', value: 'updated_at', show: true },
                ],
                popoverVisible: false,
                checkAll: true,
                checkedColumns: [],
                isIndeterminate: false,
            }
        },
      created () {
        this.getFliggyList()
      },
      methods: {
        async getFliggyList () {
        const { data: res } = await this.$http.get('shanrong_money/index', { params: this.queryInfo })
        if (res.code != 200) {
            return this.$message.error(res.msg)
        }
        this.loading=false
          console.log( res.data.data)
        this.tableData = res.data.data
        this.total = res.data.total
        this.queryInfo.pagenum = res.data.current_page
        },
        // 监听 pagesize 改变事件
        handleSizeChange (newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getFliggyList()
        },
        // 监听页面值改变的事件
        handleCurrentChange (newPage) {
        // console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getFliggyList()
        },
        // -------------------------- Popover相关方法 START -------------------------
            // 点击“操作”打开菜单选择框
            openPopover() {
                this.popoverVisible = true;
                // 去掉第二个popover弹框(修改问题:使用fixed固定列后popover会出现两个)
                this.$nextTick(() => {
                    document.getElementsByClassName('tablePopover')[1].style.display = 'none';
                })
            },
            // 弹出框打开时触发
            showPopover() {
                // 选中目前已展示的字段值
                this.checkedColumns = [];
                this.columns.map(item => {
                    if(item.show) {
                        this.checkedColumns.push(item.value);
                    }
                });
                // 如果目前展示的是全部字段,则需要勾选上“全选”按钮
                if(this.columns.length == this.checkedColumns.length) {
                    this.checkAll = true;
                    this.isIndeterminate = false;
                }
                // 重新渲染表格
                this.$nextTick(() => {
                    this.$refs.multipleTable.doLayout();
                })
            },
            // 点击弹出框的“全选”按钮
            handleCheckAllChange(val) {
                let columnsValueList = [];
                this.columns.map(item => columnsValueList.push(item.value));
                this.checkedColumns = val ? columnsValueList : [];
                this.isIndeterminate = false;
            },
            // 点击弹出框的选择展示菜单的复选框
            handleCheckedColumnsChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.columns.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length;
            },
            // 点击弹出框的“取消”按钮
            canclePopover() {
                this.popoverVisible = false;
                // this.$refs.tablePopover.doClose();
            },
            // 点击弹出框的“确定”按钮
            confirmPopover() {
                if(this.checkedColumns.length == 0) {
                    this.$message({
                        message: '请选择需要展示的表格字段',
                        center: true,
                        customClass: 'message-error'
                    });
                    return;
                }
                // 根据选择结果,遍历修改列是否展示的属性值
                this.columns.forEach(item => {
                    if(this.checkedColumns.some(el => el == item.value)) {
                        item.show = true;
                    } else {
                        item.show = false;
                    }
                })
                this.popoverVisible = false;
                // this.$refs.tablePopover.doClose();
                // 重新渲染表格
                this.$nextTick(() => {
                    this.$refs.multipleTable.doLayout();
                })
            },
            // 表格列是否显示的方法
            showColumn(currentColumn){
                return this.columns.find(item => item.value == currentColumn).show;
            },
            // -------------------------- Popover相关方法 END -------------------------
      },
      
    }
    </script>
    
    <style  scoped>
    .popoverCheckBoxArea {
        padding: 10px 20px 0 20px;
        margin-bottom: 10px;
        max-height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .popoverCheckBoxButton {
            text-align: center;
            padding-bottom: 10px;
        }
    </style>
    

本文标题为:elementUI el-table 表格实现手动选择展示列

基础教程推荐