吾爱源码 最新更新
快捷导航
您的位置：首页 > 站长学院 > 网络技术 >  正文内容 vue+elementUI配置表格的列显示与隐藏

关注微信公众号

扫一扫

vue+elementUI配置表格的列显示与隐藏

 更新时间：2022-04-13 14:47:07   作者：佚名   我要评论(0)

vue+elementUI配置表格的列显示与隐藏，供大家参考，具体内容如下
描述：
表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue+

vue+elementUI配置表格的列显示与隐藏，供大家参考，具体内容如下

描述：

表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue+elementUI（适配Vue3的Element Plus）实现的，具体效果与代码如下：

效果图：

完整代码：

<template>
? <div id="app">
? ? <el-table :data="tableData" border style="width: 100%" ref="table">
? ? ? <el-table-column
? ? ? ? fixed
? ? ? ? type="index"
? ? ? ? align="center"
? ? ? ? :index="1">
? ? ? ? <template #header>
? ? ? ? ? <el-popover
? ? ? ? ? ? placement="bottom"
? ? ? ? ? ? :width="600"
? ? ? ? ? ? :visible="visible"
? ? ? ? ? >
? ? ? ? ? ? <!-- 配置列面板 -->
? ? ? ? ? ? <transition name="fade">
? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div>选择显示字段</div>
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.city">市区</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
? ? ? ? ? ? ? ? ? <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </transition>
? ? ? ? ? ? <div style="text-align: right; margin: 0">
? ? ? ? ? ? ? <el-button size="mini" type="text" @click="visible = false">取消</el-button>
? ? ? ? ? ? ? <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
? ? ? ? ? ? </div>
? ? ? ? ? ? <template #reference>
? ? ? ? ? ? ? <i
? ? ? ? ? ? ? ? class="el-icon-setting"
? ? ? ? ? ? ? ? style="font-size: 22px; cursor: pointer"
? ? ? ? ? ? ? ? @click="visible = true"
? ? ? ? ? ? ? ></i>
? ? ? ? ? ? </template>
? ? ? ? ? </el-popover>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="date"
? ? ? ? label="日期"
? ? ? ? width="150"
? ? ? ? v-if="showColumn.date"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="name"
? ? ? ? label="姓名"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.name"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="province"
? ? ? ? label="省份"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.provinces"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="city"
? ? ? ? label="市区"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.city"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="address"
? ? ? ? label="地址"
? ? ? ? minWidth="300"
? ? ? ? v-if="showColumn.adreess"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="zip"
? ? ? ? label="邮编"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.zipCode"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column label="操作" fixed="right" width="100" align="center">
? ? ? ? <template #default="scope">
? ? ? ? ? <el-button @click="handleClick(scope.row)" type="text" size="small"
? ? ? ? ? ? >查看</el-button
? ? ? ? ? >
? ? ? ? ? <el-button type="text" size="small">编辑</el-button>
? ? ? ? </template>
? ? ? </el-table-column>
? ? </el-table>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? visible: false,
? ? ? tableData: [
? ? ? ? {
? ? ? ? ? date: "2016-05-02",
? ? ? ? ? name: "王小虎",
? ? ? ? ? province: "上海",
? ? ? ? ? city: "普陀区",
? ? ? ? ? address: "上海市普陀区金沙江路 1518 弄",
? ? ? ? ? zip: 200333,
? ? ? ? },
? ? ? ? {
? ? ? ? ? date: "2016-05-04",
? ? ? ? ? name: "王小虎",
? ? ? ? ? province: "上海",
? ? ? ? ? city: "普陀区",
? ? ? ? ? address: "上海市普陀区金沙江路 1517 弄",
? ? ? ? ? zip: 200333,
? ? ? ? },
? ? ? ? {
? ? ? ? ? date: "2016-05-01",
? ? ? ? ? name: "王小虎",
? ? ? ? ? province: "上海",
? ? ? ? ? city: "普陀区",
? ? ? ? ? address: "上海市普陀区金沙江路 1519 弄",
? ? ? ? ? zip: 200333,
? ? ? ? },
? ? ? ? {
? ? ? ? ? date: "2016-05-03",
? ? ? ? ? name: "王小虎",
? ? ? ? ? province: "上海",
? ? ? ? ? city: "普陀区",
? ? ? ? ? address: "上海市普陀区金沙江路 1516 弄",
? ? ? ? ? zip: 200333,
? ? ? ? },
? ? ? ],
? ? ? // 列的配置化对象，存储配置信息
? ? ? showColumn: {
? ? ? ? date: true,
? ? ? ? name: true,
? ? ? ? provinces: true,
? ? ? ? city: true,
? ? ? ? adreess: true,
? ? ? ? zipCode: true,
? ? ? },
? ? };
? },
? mounted() {
? ? // 发请求得到showColumnInitData的列的名字
? ? if(localStorage.getItem("columnSet")){
? ? ? this.showColumn = JSON.parse(localStorage.getItem("columnSet"))
? ? }else{
? ? ? this.showColumn = {
? ? ? ? date: true,
? ? ? ? name: true,
? ? ? ? provinces: true,
? ? ? ? city: true,
? ? ? ? adreess: true,
? ? ? ? zipCode: true,
? ? ? };
? ? }
? },
? methods: {
? ? handleClick(row) {
? ? ? console.log(row);
? ? },
? ? saveColumn() {
? ? ? localStorage.setItem("columnSet",JSON.stringify(this.showColumn))
? ? ? this.visible = false;
? ? },
? },
};
</script>

<style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
? transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
? opacity: 0;
}
</style>

问题：

1、可以简单实现，但最好的方法是列的全部字段也通过配置实现；

2、elementUI的popover嵌套在table里使用时，会出现面板的显示bug，例如本文是采用:visible=“visible”，如果按照正常双向绑定v-model:visible=“visible”，则会出现弹窗闪现的现象，弹出后会立马关闭；

现象：

原因猜想：

v-model:visible=“visible”，会自动触发遮罩层关闭，置visible变为false（watch监听visible，点击弹出按钮时，visible变为true后会立马变为false）；

3、如果某一列设置minWidth属性，如果隐藏该列，则popover会出现弹出两个窗口的异常现象，例如“地址”列：

故可采用dialog来实现：

<template>
? <div id="app">
? ? <el-table :data="tableData" border style="width: 100%" ref="table">
? ? ? <el-table-column
? ? ? ? fixed
? ? ? ? type="index"
? ? ? ? align="center"
? ? ? ? :index="1">
? ? ? ? <template #header>
? ? ? ? ? <i
? ? ? ? ? ? class="el-icon-setting"
? ? ? ? ? ? style="font-size: 22px; cursor: pointer"
? ? ? ? ? ? @click="visible = true"
? ? ? ? ? ></i>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="date"
? ? ? ? label="日期"
? ? ? ? width="150"
? ? ? ? v-if="showColumn.date"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="name"
? ? ? ? label="姓名"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.name"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="province"
? ? ? ? label="省份"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.provinces"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="city"
? ? ? ? label="市区"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.city"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="address"
? ? ? ? label="地址"
? ? ? ? minWidth="300"
? ? ? ? v-if="showColumn.adreess"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="zip"
? ? ? ? label="邮编"
? ? ? ? width="120"
? ? ? ? v-if="showColumn.zipCode"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column label="操作" fixed="right" width="100" align="center">
? ? ? ? <template #default="scope">
? ? ? ? ? <el-button @click="handleClick(scope.row)" type="text" size="small"
? ? ? ? ? ? >查看</el-button
? ? ? ? ? >
? ? ? ? ? <el-button type="text" size="small">编辑</el-button>
? ? ? ? </template>
? ? ? </el-table-column>
? ? </el-table>
? ? <el-dialog title="字段配置" v-model="visible">
? ? ? <transition name="fade">
? ? ? ? <div>
? ? ? ? ? <div>选择显示字段</div>
? ? ? ? ? <div>
? ? ? ? ? ? <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="showColumn.city">市区</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
? ? ? ? ? ? <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </transition>
? ? ? <template #footer>
? ? ? ? <span class="dialog-footer">
? ? ? ? ? <el-button @click="visible = false">取 消</el-button>
? ? ? ? ? <el-button type="primary" @click="saveColumn">确 定</el-button>
? ? ? ? </span>
? ? ? </template>
? ? </el-dialog>
? </div>
</template>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • vue实现动态控制表格列的显示隐藏
  • vue+elementui实现动态控制表格列的显示和隐藏
  • vue实现动态控制el-table表格列的展示与隐藏
  • Vue实现动态控制表格列的显示和隐藏
  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
  • vue elementUI table表格数据 滚动懒加载的实现方法
  • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
  • vue+elementUI中表格高亮或字体颜色改变操作
  • Vue+elementui 实现复杂表头和动态增加列的二维表格功能
  • Vue2.0+ElementUI实现表格翻页的实例

您可能感兴趣的文章:

相关文章

  • vue+elementUI配置表格的列显示与隐藏

    vue+elementUI配置表格的列显示与隐藏

    vue+elementUI配置表格的列显示与隐藏，供大家参考，具体内容如下 描述： 表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue+
    2022-04-13
  • vue项目打包部署后默认路由不正确的解决方案

    vue项目打包部署后默认路由不正确的解决方案

    目录打包部署后默认路由不正确问题描述解决方案vue打包后路径不对对于背景图片不显示的问题动画无法运行小图标没了打包部署后默认路由不正确
    2022-04-13
  • Spring?Cloud负载均衡组件Ribbon原理解析

    Spring?Cloud负载均衡组件Ribbon原理解析

    目录前言一个问题引发的思考Ribbon的简单使用Ribbon 原理分析LoadBalancerAutoConfiguration 自动装配RestTemplateCustomizerLoadBalancerIn
    2022-04-13
  • vue elementUI表格控制显示隐藏对应列的方法

    vue elementUI表格控制显示隐藏对应列的方法

    本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码，供大家参考，具体内容如下 需求：后端返回全部列数据。前端根据选项来
    2022-04-13
  • ASP.NET?Core管理应用程序状态

    ASP.NET?Core管理应用程序状态

    在ASP.NET Core中，由多种途径可以对应用程序状态进行管理，使用哪种途径，由检索状态的时机和方式决定。 应用程序状态指的是用于描述当前状
    2022-04-13
  • C语言结构体超详细讲解

    C语言结构体超详细讲解

    目录前言1、结构体的声明1.1 结构的基础知识1.2 结构的声明1.3 结构成员的类型1.4 结构体变量的定义和初始化2、结构体成员的访问2.1 点操作符
    2022-04-13
  • Vue?router应用问题实战记录

    Vue?router应用问题实战记录

    目录前言问题记录路由守卫的应用动态路由实现权限控制hash模式的路由参数被干扰跳转同组件路由，不刷新？总结前言 本文记录vue2的vue-router
    2022-04-13
  • golang下grpc框架的使用编写示例

    golang下grpc框架的使用编写示例

    目录1. 什么是grpc和protobuf1.1 grpc1.2 protobuf2.go下grpc2.1官网下载protobuf工具2.2 下载go的依赖包2.3 编写proto文件2.4 生成hello.pb
    2022-04-13
  • vue.js项目打包上线全流程

    vue.js项目打包上线全流程

    目录vue.js项目打包上线这里我简单的列出这个过程vue.js打包之后遇到的坑打包之后没有被渲染出来路由（router）mode:&#39;history&#39;,导致
    2022-04-13
  • Java中文件的读写方法之IO流详解

    Java中文件的读写方法之IO流详解

    目录1.File类1.1File类概述和构造方法1.2File类创建功能1.3File类判断和获取功能1.4File类删除功能2.递归2.1递归2.2递归求阶乘2.3递归遍历目
    2022-04-13

最新评论

大家感兴趣的内容

最近更新的内容

本类推荐