vue3 列表页开发【选择展示列】功能

目录

背景描述:

开发流程:

详细开发流程:

总结:


背景描述:

这个功能是基于之前写的   封装列表页  的功能继续写的,加了一个选择展示列的功能,可以随时控制表格里展示那些列的数据,如图,大概样式是这样:


开发流程:

基本上和封装列表页的流程相似,这里不做多余描述,只是需要从父组件里传递tableColumn,也可以在本组件定义

tableColumn除了控制表格的column,还有就是【选择列】的功能的数据从这里来,这里可以设置哪些需要显示与隐藏,如下:

const tableColumn = ref([{column_id: 'op_name',column_name: '操作人',default_display: true,sortable: true,minWidth: 100},{column_id: 'op_roles',column_name: '角色',default_display: true,sortable: true,minWidth: 150},//....{column_id: 'create_at',column_name: '名称12',default_display: true,sortable: true,minWidth: 170},{column_id: 'update_at',column_name: '名称13',default_display: false,sortable: true,minWidth: 170}
])

详细开发流程:

提示:这里描述项目中遇到的问题:

1.选择展示列

<el-col :span="12"><el-popover placement="bottom" trigger="click" :width="300"><template #reference><el-button class="right-button" type="default"><el-icon><Filter /></el-icon></el-button></template><span style="margin: 0 10px 0 0; font-size: 14px">选择展示列</span><el-select v-model="selectedColumns" multiple collapse-tags :teleported="false" @change="selectColumns"><el-optionv-for="(item, index) in tableCol":key="item.column_id":disabled="index == 0":label="item.column_name":value="item.column_id"></el-option></el-select></el-popover></el-col>

这里的tableCol是从父组件传的tableColumn, tableCol.value = props.tableColumn

2.已选择的展示列怎么控制表格的列显隐

// 已选的展示列
const selectedColumns = ref([])
//选择展示列
const selectColumns = () => {showTableCol.value = []let arr = []if (selectedColumns.value.length && selectedColumns.value.length != 0) {selectedColumns.value.forEach((element) => {tableCol.value.forEach((item, index) => {if (index == 0) {item.default_display = true}item.default_display = falseif (element == item.column_id || index == 0) {  //比如至少要选择第一列,不能一列都不显示arr.push(index)}})})arr = [...new Set(arr)]arr.forEach((element) => {tableCol.value[element].default_display = true})let dataTable = tableCol.value.filter((item, index) => {return item.default_display})showTableCol.value = dataTable} else {let dataTable = []dataTable = tableCol.value.filter((item) => {return item.default_display})dataTable.forEach((item) => {selectedColumns.value.push(item.column_id)})showTableCol.value = dataTable}
}

3. 表格的列显示

 <el-tablev-loading="loading":data="tableData"class="table-small-custom"height="calc(100vh - 240px)"stripe@sort-change="changeTableSort"><el-table-column type="index" width="70" label="序号"><template #default="scope"><span v-text="getIndex(scope.$index)"></span></template></el-table-column><el-table-columnv-for="(col, index) in showTableCol":key="index":prop="col.column_id":label="col.column_name":min-width="col.minWidth":sortable="col.sortable":is-show-overflow-tooltip="true"/></el-table>

这里表格的渲染是通过v-for  showTableCol ,主要就是这个。

over


总结:

目前我经常是通过这个方式写【选择展示列】功能,过滤那部分,没怎么考虑最优解,反正数据也不多,直接这样写了,如果有更合适的方式,欢迎分享~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113497.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法教程】排列与组合的实现

数据准备 在讲排列与组合之前&#xff0c;我们先定义数据元素类型Fruit class Fruit{constructor(name,price){this.name namethis.price price} }排列 对N个不同元素进行排序&#xff0c;总共有多少不同的排列方式&#xff1f; Step1: 从N个元素中取1个&#xff0c;共N种…

Pandas 数据处理分析系列1--SeriesDataFrame数据结构详解

Pandas 概述 Pandas 是一个开源的数据分析和数据处理库,是基于 NumPy 开发的。它提供了灵活且高效的数据结构,使得处理和分析结构化、缺失和时间序列数据变得更加容易。其在数据分析和数据处理领域广泛应用,在金融、社交媒体、科学研究等领域都有很高的使用率和广泛的应用场…

系列十一、Redis中分布式缓存实现

一、缓存 1.1、什么是缓存 内存就是计算机内存中的一段数据。 1.2、内存中的数据特点 读写快断电数据丢失 1.3、缓存解决了什么问题 提高了网站的吞吐量和运行效率减轻了数据库的访问压力 1.4、哪些数据适合加缓存 使用缓存时&#xff0c;一定是数据库中的数据极少发生改…

【Vue】Element开发笔记

Element开发笔记 前言 官网 https://element.eleme.cn/#/zh-CN/component/upload 其它项目网站 https://www.cnblogs.com/qq2806933146xiaobai/p/17180878.html 表格 序号列添加 <el-table-column type"index" :index"handleIndexCalc" label&qu…

深度强化学习 第 4 章 DQN 与 Q 学习

4.1 DQN 最优动作价值函数的用途 假如我们知道 Q ⋆ Q_⋆ Q⋆​&#xff0c;我们就能用它做控制。 我们希望知道 Q ⋆ Q_⋆ Q⋆​&#xff0c;因为它就像是先知一般&#xff0c;可以预见未来&#xff0c;在 t t t 时刻就预见 t t t 到 n n n时刻之间的累计奖励的期望。假如…

5G来临,迎客莱带你探索运营商大数据的应用

随着5G时代的来临&#xff0c;不仅在算力的基础上得到了加强和保障&#xff0c;同时也丰富了计算的方式和模式&#xff0c;如边缘计算、霾计算等。计算方式和模式的改变&#xff0c;对于运营商来说&#xff0c;意味着更丰富的数据维度&#xff0c;更鲜活的数据和更强大的数据处…

无人机航拍图像拼接与目标识别

一、简介 无人机用来做图像侦察是常见功能&#xff0c;现有技术基本是无人机对某片区域进行飞行&#xff0c;人工实时监控飞行图像&#xff0c;将图像录制成视频供事后回放。此方法对人员业务要求比较高、反应速度足够快、不利于信息收集、录制视频丢失空间信息、对于后期开展区…

Qt判断一个点在多边形内还是外(支持凸边形和凹变形)

这里实现的方法是转载于https://blog.csdn.net/trj14/article/details/43190653和https://blog.csdn.net/WilliamSun0122/article/details/77994526 来实现的&#xff0c;并且按照Qt的规则进行了调整。 以下实现方法有四种&#xff0c;每种方法的具体讲解在转载的博客中有说明&…

Python之爬虫

目录 HTTP请求HTTP响应获得页面响应伪装用户访问打包数据爬取豆瓣top250 HTTP请求 HTTP&#xff1a;HypertextTransferProtcol 超文本传输协议 1、请求行 POST/user/info?new_usertrue HTTP/1.1#资源了路径user/info 查询参数new_usertrue 协议版本HTTP/1.1 2、请求头 Ho…

element ui 下拉框 选择月份和天数

一、背景 目前做的管理系统项目&#xff0c;期望实现功能为&#xff1a;设置出账周期和出账日&#xff0c;考虑使用element ui下拉框实现功能 二、所用技术 vue2element ui 三、实现效果 四、具体代码 <template><popup-frame :title"批量设置出账日" …

Leetcode—2530.执行K次操作后的最大分数【中等】(C语言向上取整数学公式)

2023每日刷题&#xff08;五&#xff09; Leetcode—2530.执行K次操作后的最大分数 向上取整思想 参考了这篇文章 有人肯定会问&#xff0c;这个向上取整为什么是这样来的。接下来我简单讲解一下。 数学式&#xff1a; x y 数学式&#xff1a;\frac{x}{y} 数学式&#xff1a…

配置Linux

首先安装VMware&#xff1a; 安装说明&#xff1a;&#xff08;含许可证的key&#xff09; https://mp.weixin.qq.com/s/XE-BmeKHlhfiRA1bkNHTtg 给大家提供了VMware Workstation Pro16&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1q8VE3TkPzDnM3u9bkTdA_g 提取码&…

文件的物理结构(连续分配,链接分配,索引分配)

1.文件块&#xff0c;磁盘块 类似于内存分页&#xff0c;磁盘中的存储单元也会被分为一个个“块/磁盘块/物理块”。 很多操作系统中&#xff0c;磁盘块的大小与内存块、页面的大小相同。 内存与磁盘之间的数据交换&#xff08;即读/写操作、磁盘I/O&#xff09;都是以“块”为…

详细解读DALLE 3技术报告:Improving Image Generation with Better Captions

Diffusion models代码解读&#xff1a;入门与实战 前言&#xff1a;OpenAI是推动大模型创新的领头羊&#xff0c;最近发布的DALLE 3凭借着远超市面上其他图片生成模型的表现&#xff0c;再次火出圈。最近OpenAI官方发布了DALLE 3的技术报告《Improving Image Generation with B…

后缀表达式求值

题目要求: 后缀表达式求值&#xff1a;建立一个操作数栈S。然后从左到右读表达式&#xff0c;如果读到操作数就将它压入栈S中&#xff0c;如果读到n元运算符(即需要参数个数为n的运算符)则取出由栈顶向下的n项操作数进行运算&#xff0c;再将运算的结果代替原栈顶的n项压入栈中…

Catalan 数 和 Stirling 数

这个也可以理解为栈&#xff0c;用 ( 表示 入栈 &#xff0c; ) 表示出栈 , 任何情况下表示入栈的 ( 都必须大于等于 ) 的个数 这个思路和入栈出栈的思路是等价的

ms-sql server sql 把逗号分隔的字符串分开

案例&#xff1a; sql 查询-字段里是逗号,分隔开的数组&#xff0c;查询匹配数据 sql 查询-字段里是逗号,分隔开的数组&#xff0c;查询匹配数据_sql server 数组匹配-CSDN博客 SQL SERVER 把逗号隔开的字符串拆分成行 SQL SERVER 把逗号隔开的字符串拆分成行_sqlserver拆分…

【暴力剪枝】CF1708D

https://codeforces.com/contest/1708/problem/D 题意 思路 这样的操作下&#xff0c;数列减的速度是非常快的&#xff0c;也就是说&#xff0c;易出现很多的0&#xff0c;0的操作没啥意义&#xff0c;所以我们要找到第一个 >0 的数对其后的序列进行排序&#xff0c;就能大…

【Edabit 算法 ★☆☆☆☆☆】Power Calculator

【Edabit 算法 ★☆☆☆☆☆】Power Calculator math numbers Instructions Create a function that takes voltage and current and returns the calculated power. Examples circuitPower(230, 10) // 2300 circuitPower(110, 3) // 330 circuitPower(480, 20) // 9600Not…

大数据平台开发经验

如果我是一个有着10年大数据平台开发经验的开发者&#xff0c;面试时可能需要准备以下知识 大数据生态系统&#xff1a;** 熟悉大数据技术栈&#xff0c;如Hadoop、Spark、Flink等&#xff0c;了解它们的原理、用途和优劣势。 分布式系统设计&#xff1a; 深入了解分布式系统的…