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.mfbz.cn/a/675013.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

成功解决“ModuleNotFoundError: No Module Named Pycocotools”错误的全面指南

成功解决“ModuleNotFoundError: No Module Named Pycocotools”错误的全面指南 在Python的数据科学、计算机视觉和机器学习项目中&#xff0c;经常需要用到各种工具和库来加速开发过程。其中&#xff0c;pycocotools 是一个专门用于处理 COCO 数据集的库&#xff0c;它提供了多…

2024年Google算法更新打击低质量(如AI生成)内容后,英文SEO优化人员该如何调整谷歌SEO优化策略?

3月5日&#xff0c;谷歌发布了2024年的首次算法更新。与以往更新不同&#xff0c;本次更新更加复杂&#xff0c;这次更新旨在提高搜索结果的质量和相关性&#xff0c;可能对外贸网站排名和流量产生显著影响。也将产生更大的网站数据波动。但在担心自己的网站数据受到影响之前&a…

Django 里的增删改查

下面是步骤 先更新 urls.py 来添加新的url from django.contrib import admin from django.urls import path from app01 import viewsurlpatterns [path(demo/, views.demo), ]在 models.py 里创建表 from django.db import models# Create your models here. class UserI…

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

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

BioTech - 使用 Kubeflow 多机多卡 运行 高精度蛋白质结构的迭代预测

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/139418138 核心逻辑,参考:使用 循环(Recycle)迭代的蛋白质结构预测 获取 高精度结构 Kubeflow 是一个开源的 Kubernetes 原生框架,专注于简化、可移植和可…

【反悔贪心】算法讲解

目录 cf865D 环形喂猪 建筑抢修 cf865D 思路&#xff1a; 我们贪心的原则是尽可能的多卖&#xff0c;而且尽可能的卖的多。 整体的贪心思路就是能卖就卖&#xff0c;卖完后放入堆中&#xff08;以便反悔&#xff09;&#xff0c;先不考虑能卖多少&#xff0c;因为堆是按照价…

02--nginx代理缓存

前言&#xff1a;比较常用的用法反向代理&#xff0c;和缓存的一些操作&#xff0c;用虚拟环境复刻出来&#xff0c;里面参数不用详细记录&#xff0c;用作复习&#xff0c;使用时直接查找即可。环境搭建过程参考前一篇文章nginx基础。 1、基础环境 IP角色作用192.168.189.143…

AWR设置工程仿真频率、原理图仿真频率、默认单位

AWR设置工程仿真频率、原理图仿真频率、默认单位 生活不易&#xff0c;喵喵叹气。马上就要上班了&#xff0c;公司的ADS的版权紧缺&#xff0c;主要用的软件都是NI 的AWR&#xff0c;只能趁着现在没事做先学习一下子了&#xff0c;希望不要裁我。 最近稍微学习了一下AWR这个软…

参加质量源于设计QbD培训能学到什么

近年来&#xff0c;产品质量已经成为了企业能否立足市场的关键。因此&#xff0c;质量源于设计&#xff08;QbD&#xff09;的理念应运而生&#xff0c;它强调在产品开发初期就注重质量设计&#xff0c;以最大限度地降低潜在风险&#xff0c;提高产品的稳定性和可靠性。参加质量…

诺亚财富——财富管理行业的进化逻辑

詹姆斯•卡斯的著作《有限与无限的游戏》中&#xff0c;传递出这样一种观点&#xff1a; “有限的游戏&#xff0c;其目的在于赢得胜利&#xff1b;无限的游戏&#xff0c;却旨在让游戏永远进行下去。有限的游戏在边界内玩&#xff0c;无限的游戏玩的就是边界。” 在商业社会…

我的app开始养活我了

大家在日常使用各类 app 时应该会发现&#xff0c;进入 app 会有个开屏广告&#xff0c;在使用 app 中&#xff0c;时不时的也会有广告被我们刷到。 这时候如果我们看完了这个广告&#xff0c;或者点击了这个广告的话&#xff0c;app商家就会获得这个广告的佣金。 这个佣金就是…

用WebStorm和VS Code断点调试Vue

大家好&#xff0c;我是咕噜铁蛋&#xff01;。今天&#xff0c;我想和大家分享一下如何在WebStorm和VS Code这两款流行的开发工具中&#xff0c;使用断点调试Vue.js项目。Vue.js作为前端三大框架之一&#xff0c;以其轻量级和组件化的特性&#xff0c;受到了广大开发者的喜爱。…

18、matlab信号生成与预处理--剔除异常值:hampel()函数

1、语法 说明&#xff1a;对输入向量x应用Hampel滤波器来检测和去除异常值。 1&#xff09;y hampel(x) 参数&#xff1a;x&#xff1a;输入信号 y:预处理的输出信号 对于x的每个样本&#xff0c;函数计算由样本及其周围的六个样本组成的窗口的中位数&#xff0c;每边三…

Linux下的Git应用及配置

1、卸载 2、安装 3、创建并初始化 4、配置 &#xff08;附加删除语句&#xff09; 5、查看&#xff08;tree .git/&#xff09; 6、增加和提交 7、打印日志 8、验证已操作工作

LeetCode刷题:反转链表

leetCode真题 206. 反转链表 属于基础简单题目 常见的做法有递归和while循环 递归 // 1. 递归参数和返回值public static ListNode reverseList(ListNode head) {// 1. 递归终止条件if (head null || head.next null) {return head;}// 递归逻辑ListNode last reverseL…

安全攻防知识——CTF之MISC

前言&#xff1a; 本周技术分享将介绍安全攻防知识中的MISC部分。MISC&#xff0c;中文即杂项&#xff0c;包括隐写、数据还原、脑洞、社会工程、压缩包解密、流量分析取证、与信息安全相关的大数据等。让我们一起来了解更多吧&#xff01; 一&#xff09;文件结构简介 1.常见…

手把手制作Vue3+Flask全栈项目 全栈开发之路实战篇 问卷网站(一)login页面

全栈开发一条龙——前端篇 第一篇&#xff1a;框架确定、ide设置与项目创建 第二篇&#xff1a;介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇&#xff1a;setup语法&#xff0c;设置响应式数据。 第四篇&#xff1a;数据绑定、计算属性和watch监视 第五篇 : 组件…

Memory测试工具-lmbench使用详解

✨前言&#xff1a; 什么是lmbench&#xff1f; lmbench 是一个广泛使用的、开源的系统性能测量工具&#xff0c;它能对Unix-like操作系统&#xff08;包括Linux、BSD等&#xff09;进行全面的性能测试。这个套件包含了一系列针对不同系统组件&#xff08;如处理器、内存、文件…

吴恩达2022机器学习专项课程C2W2:2.23 选修_反向传播算法的工作原理(什么是导数图计算大型神经网络)

目录 引言一.导数的计算1.epsilon与导数的关系2.其它导数符号形式3.导数小结 二.小型神经网络的计算图1.什么是计算图&#xff08;前向传播过程&#xff09;2.反向传播计算过程3.验证反向传播的计算结果4.为什么用反向传播计算导数&#xff1f; 三.扩大神经网络的计算图1.计算反…

迅狐短剧小程序源码:打造个性化的追剧体验

随着移动互联网的普及&#xff0c;短剧小程序源码的开发成为了影视爱好者的新宠。它不仅为用户提供了便捷的追剧体验&#xff0c;还通过推荐系统、观看历史、个性化喜好等特色功能&#xff0c;满足了用户的多样化需求。本文将深入探讨短剧小程序源码的特点、优势以及如何实现多…