当前位置: 首页 > news >正文

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>

相关文章:

  • 如何在Java中安全地在列表中插入元素
  • element-plus 自定义命名空间 el-config-provider namespace 不起作用,html 的class值改变了,但是样式不对
  • 【中年危机】程序猿自救指南
  • 【C#】多线程中,跨线程实现对UI控件更新
  • 【并发程序设计】15.信号灯(信号量)
  • 企业百度百科词条怎么修改
  • Python 将Word、Excel、PDF、PPT文档转为OFD文档
  • 使用老毛桃制作USB安装盘并安装WIN10系统完整过程
  • 基于SpringBoot+Vue租房网站设计和实现(源码+LW+部署文档+讲解等)
  • 德国RS SMA100A原装二手sma100a信号发生器6G
  • Springboot校园美食推荐系统的开发-计算机毕业设计源码44555
  • 【Java面试】七、SpringMvc的执行流程、SpringBoot自动装配原理
  • docker 启动关闭,设置仓库地址
  • USB - ACK、NAK和STALL的含义
  • Android ANR Trace日志阅读分析技巧
  • 【跃迁之路】【463天】刻意练习系列222(2018.05.14)
  • 2019年如何成为全栈工程师?
  • crontab执行失败的多种原因
  • css的样式优先级
  • in typeof instanceof ===这些运算符有什么作用
  • Java面向对象及其三大特征
  • magento2项目上线注意事项
  • MySQL用户中的%到底包不包括localhost?
  • PhantomJS 安装
  • python_bomb----数据类型总结
  • SpiderData 2019年2月16日 DApp数据排行榜
  • 订阅Forge Viewer所有的事件
  • 猴子数据域名防封接口降低小说被封的风险
  • 技术发展面试
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 提醒我喝水chrome插件开发指南
  • 微信小程序填坑清单
  • 用jQuery怎么做到前后端分离
  • 智能网联汽车信息安全
  • Hibernate主键生成策略及选择
  • Nginx实现动静分离
  • # dbt source dbt source freshness命令详解
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • $().each和$.each的区别
  • (02)Hive SQL编译成MapReduce任务的过程
  • (3) cmake编译多个cpp文件
  • (pt可视化)利用torch的make_grid进行张量可视化
  • (Redis使用系列) Springboot 使用redis实现接口Api限流 十
  • (代码示例)使用setTimeout来延迟加载JS脚本文件
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (附源码)springboot青少年公共卫生教育平台 毕业设计 643214
  • (附源码)计算机毕业设计ssm电影分享网站
  • (含答案)C++笔试题你可以答对多少?
  • (六)库存超卖案例实战——使用mysql分布式锁解决“超卖”问题
  • (一)WLAN定义和基本架构转
  • (转) ns2/nam与nam实现相关的文件
  • (转)nsfocus-绿盟科技笔试题目
  • (转)setTimeout 和 setInterval 的区别
  • (转)大型网站的系统架构