文档章节

vue+elementui实现简易的列筛选功能实现。

一生懸命吧
 一生懸命吧
发布于 07/15 19:28
字数 731
阅读 250
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

一、简易效果图:

 

二、需求背景

大家都知道,后管类系统当中,有时一个列表可能有很多列需要展示,如下图所示,但是用户在使用系统的时候,往往会需要针对其中某几列进行数据提取,在展示列比较多的情况下,来回拉动滚动条十分的不方便

 

三、代码基本实现

①data中定义filterColumn变量,用来做抽屉el-drawer组件的展示标识

②加触发按钮:

③加抽屉组件,有下面代码可知,el-checkbox循环了columnInfo这个变量,也就是列信息变量。

④紧接着data中定义columnInfo循环列所需要的数据源,其中show字段代表当前列是否展示

columnInfo: [
        {
          prop: "custId",
          fixed: true,
          width: "150",
          sortable: true,
          label: "客户号",
          show: true
        },
        {
          prop: "payAcctName",
          width: "150",
          sortable: true,
          label: "客户名称",
          show: true
        },
        {
          prop: "merchantId",
          width: "150",
          sortable: true,
          label: "商户号",
          show: true
        },
        {
          prop: "merchantName",
          width: "150",
          sortable: true,
          label: "商户名称",
          show: true
        },
        {
          prop: "operationNo",
          width: "150",
          sortable: true,
          label: "运营机构",
          show: true
        },
        {
          prop: "operTime",
          width: "150",
          sortable: true,
          label: "交易时间",
          show: true
        },
        {
          prop: "serialId",
          width: "150",
          sortable: true,
          label: "交易流水号",
          show: true
        },
        {
          prop: "recAcct",
          width: "150",
          sortable: true,
          label: "收款账号",
          show: true
        },
        {
          prop: "IP",
          width: "150",
          sortable: true,
          label: "operIp",
          show: true
        },
        {
          prop: "operDfp",
          width: "150",
          sortable: true,
          label: "设备指纹",
          show: true
        },

        {
          prop: "terminalNo",
          width: "150",
          sortable: true,
          label: "终端号",
          show: true
        },

        {
          prop: "operAmount",
          width: "150",
          sortable: true,
          label: "交易金额(元)",
          show: true
        },
        {
          prop: "bizCode",
          width: "150",
          sortable: true,
          label: "业务类型",
          show: true
        },

        {
          prop: "cardNo",
          width: "150",
          sortable: true,
          label: "银行卡号",
          show: true
        },
        {
          prop: "cardProv",
          width: "150",
          sortable: true,
          label: "银行卡归属省",
          show: true
        },
        {
          prop: "recAcctProv",
          width: "150",
          sortable: true,
          label: "收款卡归属省",
          show: true
        },
        {
          prop: "operStatus",
          width: "150",
          sortable: true,
          label: "交易状态",
          show: true
        },

        {
          prop: "bizChannel",
          width: "150",
          sortable: true,
          label: "业务渠道",
          show: true
        }
]

⑤列表每列的数据通过一个checkedColumn做循环展示

⑥添加计算属性:至此将列信息数据源与checkbox数据源做了关联,如果每一项中show字段为false,就不需要展示当前列,这个布尔值是根据具体列对应的具体checkbox控制的。

 

⑦全选checkbox按钮上绑定了checkAll变量

⑧写监听器,监听checkAll变量变化

 

总结: el-table-column绑定的数据源是el-checkbox 绑定数据源的计算属性,所以,当勾选过程中,columnInfo变化会触发checkColumn的变化,进而影响列视图的变化!!

做的不完美,只是自己的一个思路,项目中目前也没有这样的需求,后期可以美化样式,封装成公共组件,在此做个记录。

一生懸命吧
粉丝 7
博文 82
码字总数 58302
作品 0
西安
程序员
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.4K
6
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
3.9K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3

没有更多内容

加载失败,请刷新页面

加载更多

好用到爆的 Java 技巧

本文不是一个吹嘘的文章,不会讲很多高深的架构,相反,会讲解很多基础的问题和写法问题,如果读者自认为基础问题和写法问题都是不是问题,那请忽略这篇文章,节省出时间去做一些有意义的事情...

码农突围
27分钟前
8
0
消息队列(MessageQueue)-分析

这里分析消息队列的原理和一般做法和其理念价值 这里还会 分析 NATS 和其可改进点 TODO

梦想游戏人
31分钟前
20
0
Redis 教程

Redis 教程 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统。 Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的...

rootliu
33分钟前
9
0
SPSSAU 付费数据研究报告服务

SPSSAU-付费数据分析报告服务(周老师提供) 本文分享自微信公众号 - SPSSAU(spssau)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起...

SPSSAU
2017/11/08
0
0
芋艿-springcloud gateway

http://www.iocoder.cn/Spring-Cloud/Spring-Cloud-Gateway/?github springcloud gateway 官方文档 https://cloud.spring.io/spring-cloud-gateway/reference/html/#gatewayfilter-factories......

Java搬砖工程师
52分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部