优化表单交互:在 el-select 组件中嵌入表格显示选项

介绍了一种通过 el-select 插槽实现表格样式数据展示的方案,可更直观地辅助用户选择。支持列配置、行数据绑定及自定义搜索,简洁高效,适用于复杂选择场景。完整代码见GitHub 仓库。

背景

在进行业务开发选择订单时,如果单纯的根据单号是无法编写是哪一条订单的,这个时候就可以通过表格的方式去展示这条订单的其他信息,辅助用户分辨出订单,不用再去查,更快速、更友好。

效果如下:

el-select-table-click-demo

实现

环境与依赖

  • node 22
  • vue 3
  • element-plus

思路

原理很简单,利用插槽。

虽然通过 el-table 可以实现表格效果,但对这种简单需求来说过于臃肿。而直接使用原生 table 标签结构实现太过于繁琐,不便于实现遍历 el-option

<el-select><!-- 表头,遍历 --><!-- 表体,遍历 --><el-option><!-- 行数据,遍历 --></el-option>
</el-select>

因此,我采用列表结构实现,结合 CSS 美化出表格效果。具体做法是遍历「列配置」生成表头,再遍历「options」生成行数据。

<el-select ref="inputRef" v-model="selectValue"clearablefilterable:placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @change="handleChange"
><!-- 表头 --><ul class="select-ul"><li v-for="column in columnConfig" :key="column.label">{{ column.label }}</li></ul><el-option v-for="item in showOptions" :key="item[keyNameCom]" :value="item[valueName]"><ul class="select-ul select-ul-data"><li v-for="column in columnConfig" :key="column.label">{{ item[column.prop] }}</li></ul></el-option>
</el-select>

其中,el-option 的数据绑定属性名默认是 id,可通过配置修改。同时,遍历 key 属性支持自定义,若为空则默认使用 value 属性名,减少额外数据处理。

如何使用

一个简单演示。

  • options:行数据
  • columnConfig:列配置

template 结构和 js 部分如下:

<BaseTableSelect v-model="selectValue" :options="options" :columnConfig="columnConfig" 
>
</BaseTableSelect>
const options = ref([{id: "213", department: '古典风格号', createTime: '2024-12-23', place: '学校'},{id: "546", department: '都听好', createTime: '2024-12-23', place: '家里'},{id: "345", department: '按时到岗', createTime: '2024-12-23', place: '医院'}
])const columnConfig = ref([{label: '单号', prop: 'id'},{label: '部门', prop: 'department'},{label: '时间', prop: 'createTime'},{label: '地点', prop: 'place'},
])

自定义全表格搜索

el-select-table-input-filter-demo

组件 el-select 默认的搜索功能只会根据 label 属性的值去搜索,在表格展示的场景下并不符合,因此需要用到 filter-method 自定义搜索方法属性。

初步简单实现可使用 JSON.stringify() 将选项对象转为字符串,并检测是否包含搜索关键词:

const filterMethod = queryString => {showOptions.value = props.options.filter(item => (JSON.stringify(item).includes(queryString) ? true : false))
}

不过,这种方式会将未展示的属性也纳入搜索,导致结果不准确。因此,优化后的搜索方法仅匹配已展示的列数据:

const filterMethod = queryString => {if (!queryString) {showOptions.value = props.options;return;}showOptions.value = props.options.filter(item => {// 针对每个要过滤的列进行判断return props.columnConfig.some(config => {const propValue = item[config.prop];// 将属性值转换为字符串并检查是否包含查询字符串return propValue && propValue.toString().includes(queryString);});});
}

扩展

本文提供的是基础实现。如果需要进一步功能扩展,例如控制搜索功能 (filterable) 或其他交互行为,可通过额外配置实现。但基础版本已满足我的需求,便不写太多不利于阅读代码。

组件代码

仓库:🔗 el-select-table-option

<template><el-select ref="inputRef" v-model="selectValue"clearablefilterable:placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @change="handleChange"><!-- 表头 --><ul class="select-ul"><li v-for="column in columnConfig" :key="column.label">{{ column.label }}</li></ul><el-option v-for="item in showOptions" :key="item[keyNameCom]" :value="item[valueName]"><ul class="select-ul select-ul-data"><li v-for="column in columnConfig" :key="column.label">{{ item[column.prop] }}</li></ul></el-option></el-select>
</template><script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'defineOptions({name: 'BaseTableSelect'
})const emit = defineEmits(['update:modelValue', 'keyup-enter', 'focus', 'change'])const props = defineProps({modelValue: null,disabled: {type: Boolean,default: false},placeholder: {type: String,default: '请选择'},/* 列配置 */columnConfig: {type: Array,default(rawProps) {return []}},options: {type: Array,default(rawProps) {return []}},valueName: {type: String,default: 'id'},keyName: {type: String,default: ''}
})const selectValue = computed({get: () => props.modelValue,set: val => {emit('update:modelValue', val)}
})// 实际 keyName
// 优先使用 keyName,keyName 为空时,使用 valueName
const keyNameCom = computed(() => {return props.keyName !== '' ? props.keyName : props.valueName
})const handleChange = val => {emit('change', val)
}// ref
const inputRef = ref(null)// 渲染用的options
const showOptions = ref(props.options)
watch(() => props.options,newValue => {showOptions.value = newValueselectValue.value = ''},
)
// 筛选
const filterMethod = queryString => {if (!queryString) {showOptions.value = props.options;return;}showOptions.value = props.options.filter(item => {// 针对每个要过滤的列进行判断return props.columnConfig.some(config => {const propValue = item[config.prop];// 将属性值转换为字符串并检查是否包含查询字符串return propValue && propValue.toString().includes(queryString);});});
}// 得到焦点
const getFocus = () => {nextTick(() => {inputRef.value.focus()})
}defineExpose({getFocus
})
</script><style lang="scss" scoped></style>
<style scoped lang="scss">
.select-ul {padding-right: 0;list-style: none;display: flex;justify-content: space-between;text-align: center;padding-inline-start: 0;padding: 0 20px;> li {display: inline-block;width: 100px;// margin: 6px;overflow: hidden;text-overflow: ellipsis;}
}
.el-select-dropdown__item {padding: 0;
}
</style>

属性

参数说明类型默认值
disabled是否禁用booleanfalse
placeholder请选择string‘请选择’
columnConfig列配置,[{label: ‘’, prop: ‘’}]array[]
options选项array[]
valueName选项值的属性名string‘id’
keyName遍历选项时的 keystring‘’

参考

首发地址:https://blog.xchive.top/2024/optimizing-form-interactions-embedding-table-display-options-in-el-select-components.html

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

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

相关文章

最新Kali安装详细版教程(附安装包,傻瓜式安装教程)

本文主要详细介绍 kali 的安装过程&#xff0c;以及安装完成后的基本设置&#xff0c;比如安装增强工具&#xff0c;安装中文输入法以及更新升级等操作。 文章目录 实验环境准备工作步骤说明安装虚拟机安装 Kali安装增强工具安装中文输入法更新升级 实验环境 VMware &#x…

细说STM32单片机DMA中断收发RTC实时时间并改善其鲁棒性的方法

目录 一、DMA基础知识 1、DMA简介 (1)DMA控制器 (2)DMA流 (3)DMA请求 (4)仲裁器 (5)DMA传输属性 2、源地址和目标地址 3、DMA传输模式 4、传输数据量的大小 5、数据宽度 6、地址指针递增 7、DMA工作模式 8、DMA流的优先级别 9、FIFO或直接模式 10、单次传输或突…

H.265流媒体播放器EasyPlayer.js H5流媒体播放器如何验证视频播放是否走硬解

随着技术的不断进步和5G网络的推广&#xff0c;中国流媒体播放器行业市场规模以及未来发展趋势都将持续保持稳定的增长&#xff0c;并将在未来几年迎来新的发展机遇。流媒体播放器将继续作为连接内容创作者和观众的重要桥梁&#xff0c;推动数字媒体产业的创新和发展。 EasyPla…

仿Mybatis代码生成.获取索引信息

获取索引信息 1.核心思路 通过以下sql语句&#xff0c;例如对于user表 show index from user 执行结果如下: 2.实现 连接数据库后执行sql语句&#xff0c;我们重点关注下图标注的三个熟悉 代码如下: PreparedStatement ps null;ResultSet fieldResult null;List<Fiel…

【AI大模型】大型语言模型LLM基础概览:技术原理、发展历程与未来展望

目录 &#x1f354; 大语言模型 (LLM) 背景 &#x1f354; 语言模型 (Language Model, LM) 2.1 基于规则和统计的语言模型&#xff08;N-gram&#xff09; 2.2 神经网络语言模型 2.3 基于Transformer的预训练语言模型 2.4 大语言模型 &#x1f354; 语言模型的评估指标 …

详解八大排序(一)------(插入排序,选择排序,冒泡排序,希尔排序)

文章目录 前言1.插入排序&#xff08;InsertSort&#xff09;1.1 核心思路1.2 实现代码 2.选择排序&#xff08;SelectSort&#xff09;2.1 核心思路2.2 实现代码 3.冒泡排序&#xff08;BubbleSort&#xff09;3.1 核心思路3.2 实现代码 4.希尔排序&#xff08;ShellSort&…

如何在 Ubuntu 上使用 Docker 部署 LibreOffice Online

简介 LibreOffice Online&#xff08;也称为Collabora Online&#xff09;是一个开源的在线办公套件&#xff0c;它提供了与LibreOffice桌面版相似的功能&#xff0c;但完全在云端运行。这意味着用户可以通过浏览器访问和编辑文档&#xff0c;而无需在本地计算机上安装任何软件…

【人工智能】PyTorch、TensorFlow 和 Keras 全面解析与对比:深度学习框架的终极指南

文章目录 PyTorch 全面解析2.1 PyTorch 的发展历程2.2 PyTorch 的核心特点2.3 PyTorch 的应用场景 TensorFlow 全面解析3.1 TensorFlow 的发展历程3.2 TensorFlow 的核心特点3.3 TensorFlow 的应用场景 Keras 全面解析4.1 Keras 的发展历程4.2 Keras 的核心特点4.3 Keras 的应用…

macOS 无法安装第三方app,启用任何来源的方法

升级新版本 MacOS 后&#xff0c;安装下载的软件时&#xff0c;不能在 ”安全性与隐私” 中找不到 ”任何来源” 选项。 1. 允许展示任何来源 点击 启动器 (Launchpad) – 其他 (Other) – 终端 (Terminal)&#xff1a; 打开终端后&#xff0c;输入以下代码回车&#xff1a; …

Flutter:RotationTransition旋转动画

配置vsync&#xff0c;需要实现一下with SingleTickerProviderStateMixinclass _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// 定义 AnimationController late AnimationController _controller;overridevoid initState() {super…

同步的意义以及机制

一、同步的意义 同步&#xff08;Synchronization&#xff09;的意义在于确保在多线程环境中&#xff0c;多个线程对共享资源的访问是安全的&#xff0c;避免竞争条件&#xff08;race conditions&#xff09;和数据不一致的情况。 具体来说&#xff0c;同步的核心目标是&…

第二十四章 Spring之源码阅读——AOP篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…

C++语言之STL

STL STL是标准模板库,是惠普实验室开发的一系列软件的统称 STL的6大组件 容器 算法 迭代器 仿函数 适配器 空间适配器 容器 作用:容纳存储的数据 分类: 序列式容器: 强调值的顺序,每个元素均有固定的位置,除非用删除或插入的操作改变这个位置,如vector,deque/queue,list; 关联式…

嵌入式实验报告:家用计时器

实验目的和要求 1、实验目的 掌握STM32串口通信原理。学习编程实现STM32的UART通信掌握STM32中断程序设计流程。熟悉STM32固件库的基本使用。熟悉STM32定时器中断设计流程。2、实验要求 设计一个家用计时器,其功能如下: 利用串口设置计时时间,格式:XX:XX:X 例如01:59:…

阿里巴巴官方「SpringCloudAlibaba全彩学习手册」限时开源!

最近我在知乎上看过的一个热门回答&#xff1a; 初级 Java 开发面临的最大瓶颈在于&#xff0c;脱离不出自身业务带来的局限。日常工作中大部分时间在增删改查、写写接口、改改 bug&#xff0c;久而久之就会发现&#xff0c;自己的技术水平跟刚工作时相比没什么进步。 所以我们…

低成本搭建单相220V转三相380V变频器配滤波器的转换器

一、单相转三相的迫切需求 在许多工业和商业场景中&#xff0c;三相电源因其高效、稳定的特性而被广泛应用。然而&#xff0c;并非所有场所都能提供三相电源&#xff0c;尤其是在一些老旧建筑或偏远地区&#xff0c;单相220V电源更为常见。这就迫切需要我们找到一种有效的转换…

如何从 VMware 官网下载最新版本的 VMware Workstation

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 下载VMware 📒📝 操作步骤🎈 获取方式 🎈⚓️ 相关链接 ⚓️📖 介绍 📖 你是否曾尝试从 VMware 官网下载 VMware Workstation,但总是被繁杂的选择和复杂的操作困扰?VMware 提供的产品种类繁多,而且官网页面设计复…

数据结构_图的遍历

深度优先搜索遍历 遍历思想 邻接矩阵上的遍历算法 void Map::DFSTraverse() {int i, v;for (i 0; i < MaxLen; i){visited[i] false;}for (i 0; i < Vexnum; i){// 如果顶点未访问&#xff0c;则进行深度优先搜索if (visited[i] false){DFS(i);}}cout << endl…

基于CVE安全公告号,全面修复麒麟ARM系统OpenSSH漏洞

前言&#xff1a;负责的其中一个从0开始搭建的某生产项目上线前需要做青藤安全扫描&#xff0c;过了后才允许上线&#xff0c;该项目从操作系统、中间件、数据库、容器等全国产信创化&#xff0c;公司公告为CVE安全公告号&#xff0c;而修复漏洞的责任归我&#xff0c;需要根据…

python成绩分级 2024年6月python二级真题 青少年编程电子学会编程等级考试python二级真题解析

目录 python成绩分级 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python成绩分级 2024年6月 python编程等级考试二级编程题 一、题目要求 …