d2-crud-plus 使用小技巧(六)—— 表单下拉选择 行样式 溢出时显示异常优化

问题

vue2 + elementUI + d2-crud-plus,数据类型为select时,行样式显示为tag样式,但是如果选择内容过长就会出现下面这种bug,显然用户体验不够友好。
在这里插入图片描述
在这里插入图片描述

期望

在这里插入图片描述

代码

js

export const crudOptions = (vm) => {return {...columns: [...{title: '类型',key: 'type',align: 'center',search: {disabled: false,component: {name: 'dict-select',filterable: true}},type: 'select',component: {class: ['overflowHiding']},dict: {...}},...]...}
}

css

<style lang="scss">
.overflowHiding {.tag-item {max-width: 90% !important;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
}
</style>

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

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

相关文章

图书管理系统(https://github.com/plusmultiply0/bookmanagesystem)

特意去github找了一个用flask框架的项目&#xff0c;一起来学习它吧 这个系统包括很多功能&#xff1a;用户权限管理模块&#xff08;管理员和普通用户&#xff09;&#xff0c;注册登录模块&#xff08;滑块验证码功能&#xff09;&#xff0c;图书有关信息模块&#xff08;借…

毫米级精度3D人脸扫描设备,助推打造元宇宙虚拟分身

在元宇宙中&#xff0c;虚拟分身对应的是一个三维模型&#xff0c;数字化的过程则是三维重建过程&#xff0c;通过3D人脸扫描可以通过多相机同步采集人脸部&#xff0c;可快速、准确地重建出真人地脸部模型及贴图&#xff0c;通过3D人脸扫描设备可快速重建出高逼真的虚拟分身。…

Linux系统下+jmeter分布式压测

一.配置jdk&#xff08;Linux机都需配置同一个版本&#xff09; 下载Linux系统的jdk&#xff0c;下载地址&#xff1a;https://repo.huaweicloud.com/java/jdk/ 下载后的jdk文件上传到 /opt目录下 进入opt目录&#xff0c;查看jdk文件 cd /opt ll 1.解压文件 tar xzvf jd…

真国色码上赞,科技流量双剑合璧,商家获客新纪元开启

在数字化浪潮汹涌的今天,真国色研发团队依托红玉房网络科技公司的雄厚实力,凭借科技领先的核心竞争力,推出了创新性的商家曝光引流工具——码上赞。这款工具借助微信支付与视频号已有功能,为实体商家提供了一种全新的引流获客方式,实现了科技与商业的完美融合。 科技领先,流量黑…

CSS 空间转换 动画

目录 1. 空间转换1.1 视距 - perspective1.2 空间转换 - 旋转1.3 立体呈现 - transform-style1.4 空间转换 - 缩放 2. 动画 - animation2.1 动画的基本用法2.1 animation 复合属性2.2 animation 拆分属性2.3 多组动画 正文开始 1. 空间转换 空间&#xff1a;是从坐标轴角度定义…

Paddle实现单目标检测

单目标检测 单目标检测&#xff08;Single Object Detection&#xff09;是人工智能领域中的一个重要研究方向&#xff0c;旨在通过计算机视觉技术&#xff0c;识别和定位图像中的特定目标物体。单目标检测可以应用于各种场景&#xff0c;如智能监控、自动驾驶、医疗影像分析等…

短视频矩阵系统搭建开发,ai智能剪辑系统,矩阵发布,一键管理多个账户

前言&#xff1a; 企业短视频矩阵是企业通过搭建多个短视频平台账号&#xff0c;形成一个多元化的内容传播网络。它旨在通过多平台内容的同步传播&#xff0c;实现企业品牌价值的最大化。短视频矩阵包括抖音、快手、视频号、小红书、百家号等热门短视频平台&#xff0c;其核心…

LeetCode 每日一题 数学篇 2520.统计能整除数字的位数

给你一个整数 num &#xff0c;返回 num 中能整除 num 的数位的数目。 如果满足 nums % val 0 &#xff0c;则认为整数 val 可以整除 nums 。 int countDigits(int num) {int t num, res 0;while (t) {if (num % (t % 10) 0) {res 1;}t / 10;}return res; }解题思路&…

AT_abc348_c [ABC348C] Colorful Beans 题解

题目传送门 解题思路 对于每种颜色的豆子&#xff0c;我们先找到美味度最小的那个&#xff0c;最后找出这些不同种类的豆子中美味度最大的即可。 那我们怎么找到第 i i i 种豆子中美味度最小的那个呢&#xff1f;这里给出两种思路&#xff1a; 使用桶的思想标记。对于每一…

向日葵抓住哪三个要点,帮助企业构建专业技术支持服务体系?

售后技术支持是销售行为的延续&#xff0c;在存量时代企业是否能够提供优质专业的售后技术支持服务显得尤为重要&#xff0c;它直接关系到企业产品在市场中的口碑&#xff0c;进而影响企业的发展命运。 因此&#xff0c;企业势必需要重视技术支持服务体系的搭建&#xff0c;引…

JavaScript 事件循环竟还能这样玩!

JavaScript 是一种单线程的编程语言&#xff0c;这意味着它一次只能执行一个任务。为了能够处理异步操作&#xff0c;JavaScript 使用了一种称为事件循环&#xff08;Event Loop&#xff09;的机制。 本文将深入探讨事件循环的工作原理&#xff0c;并展示如何基于这一原理实现一…

git-commit-id-plugin maven插件笔记(git commitId跟踪工具)

文章目录 maven依赖git.properties 例子 代码版本管理比较混乱&#xff0c;如何记录呢? 一种是手动记录&#xff0c;也可以实现&#xff0c;显得有点笨。 也可以通过插件。 maven依赖 <plugin><groupId>pl.project13.maven</groupId><artifactId>git…

面试题系列:Python是什么?使用Python有什么好处?你对 PEP 8 有什么理解?

###面试题系列:Python是什么?使用Python有什么好处?你对 PEP 8 有什么理解? 1、Python是什么? Python是一门动态的(dynamic)且强类型(strong)语言 延伸: 1)静态类型语言和动态类型语言的判别的标准 如果类型检查发生在编译阶段(compile time),那么是静态类型语言(s…

【数据分享】水体分布与五级水系和流域矢量数据+2000-2022年植被指数(NDVI)数据(全国/分省/分市)

1. 数据介绍 数据分为3个层次结构&#xff0c;分别为省、地级市、县。其中&#xff0c;省级水体31个&#xff08;不包含香港、台湾等&#xff09;&#xff0c; 地级市水体366个&#xff0c;县级市水体2847个。每一个文件夹中都包含该省、地级市或者县的水体矢量数据、行政边界…

数学建模 —— 灰色系统(4)

目录 什么是灰色系统&#xff1f; 一、灰色关联分析 1.1 灰色关联分析模型 1.2 灰色关联因素和关联算子集 1.2.1 灰色关联因素 1.2.2 关联算子集 1.3 灰色关联公理与灰色关联度 1.3.1 灰色关联度 1.3.2 灰色关联度计算步骤 1.4 广义关联度 1.4.1 灰色绝对关联…

一文读懂GDPR

GDPR将对人们的网络足迹、使用的APP和服务如何保护或利用这些数据产生重大影响。 下面我们将对有关GDPR人们最关心的问题进行解读。 GDPR是什么&#xff1f; 一般数据保护条例&#xff08;General Data Protection Regulation&#xff09;是一项全面的法律&#xff0c;赋予了…

风电Weibull+随机出力!利用ARMA模型随机生成风速+风速Weibull分布程序代码!

前言 随着能源问题日益突出&#xff0c;风力发电等以可再生能源为基础的发电技术越来越受到关注。建立能够正确反映实际风速特性的风速模型是研究风力发电系统控制策略以及并网运行特性的重要基础叫。由于风速的随机性和波动性&#xff0c;系统中的机械设备和电气设备以及电网…

计算机网络⑩ —— Linux系统如何收发网络包

转载于小林coding&#xff1a;https://www.xiaolincoding.com/network/1_base/how_os_deal_network_package.html 1. OSI七层模型 应用层&#xff0c;负责给应用程序提供统一的接口&#xff1b;表示层&#xff0c;负责把数据转换成兼容另一个系统能识别的格式&#xff1b;会话…

深度剖析云边对接技术:探索开放API接口的价值与意义

在当今数字化时代的浪潮中&#xff0c;云边对接与开放API接口成为了塑造行业生态的重要驱动力。随着云计算、物联网和边缘计算等技术的快速发展&#xff0c;传统产业正在迈向数字化转型的关键时刻。而在这个过程中&#xff0c;云边对接技术以及开放的应用程序接口(API)扮演着举…

处理STM32 DMA方式下的HAL_UART_ERROR_ORE错误

1. 检查并调整DMA和UART配置 确保初始化顺序&#xff1a;需要确保USART的CR寄存器UE位开关留到最后打开&#xff0c;即完成USART和DMA的所有配置初始化后再使能USART。这样可以避免初始化顺序不当导致的通信问题。配置合适的DMA缓冲区&#xff1a;确保DMA缓冲区足够大&#xf…