那些网站是php做的,嵌入式软件开发技术,网页设计素材免费版,wordpress摄影模板【前言】Element#xff08;饿了么开源组件库#xff09;在国内使用的普及率和覆盖率高于TDesign-vue#xff08;腾讯开源组件库#xff09;#xff0c;这也导致日常开发遇到组件使用上的疑惑时#xff0c;网上几乎搜索不到其文章解决方案#xff0c;只能深挖官方文档或…【前言】Element饿了么开源组件库在国内使用的普及率和覆盖率高于TDesign-vue腾讯开源组件库这也导致日常开发遇到组件使用上的疑惑时网上几乎搜索不到其文章解决方案只能深挖官方文档或者提issue以下记录一些日常在vue3开发时部分组件使用的注意点持续更新中...
一、 t-checkbox-group复选框组、t-checkbox单个复选框
问题固定容器宽度下如果复选框文本过长时复选框样式变形被挤压。场景图相关示例代码
templatedivstylewidth: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;t-checkbox-groupstylewidth: 300px; margin-bottom: 16pxv-modelchecked:options[我是t-checkbox-group组件的文本超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长,]/t-checkbox-groupt-checkbox v-modelchecked1 stylewidth: 300px我是t-checkbox组件的文本超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长/t-checkbox/div
/templatescript setup
import { ref } from vue;
const checked ref([]);
/script
解决方法通过控制台审查复选框样式发现复选框文本容器的父级使用了弹性盒子布局将该容器作为内联块级弹性伸缩盒显示此时可以使用深度选择器修改复选框文本容器样式。 style langless scoped
:deep(.t-checkbox__label) {flex: 1;
}
/style 二、t-select下拉选择器
问题当t-select选择器下拉文本较长且父级容易宽度或者高度比较小时样式展示效果不佳。场景图相关示例代码
templatedivstylewidth: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;padding-top: 20px;t-dialog :visible.syncvisiblediv classflex-jc-act-select v-modelchecked stylewidth: 200pxt-optionv-foritem in selectList:keyitem:labelitem:valueitem/t-option/t-select/div/t-dialog/div
/templatescript setup
import { ref } from vue;
const visible ref(true);
const checked ref([]);
const selectList [我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,我是下拉文本数据很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,
];
/script解决方法通过控制台审查复选框样式发现t-select选择器popup悬浮层默认最大宽度是1000px最大高度是300px。官方提供了popupProps属性可以透传内部的悬浮层组件此时可以配置popup的overlayInnerStyle属性配置最大宽度和高度。 t-selectv-modelcheckedstylewidth: 200px:popup-props{overlayInnerStyle: { maxHeight: 200px, maxWidth: 200px },}t-optionv-foritem in selectList:keyitem:labelitem:valueitem/t-option/t-select
三、t-tree-select下拉树选择器
问题同t-select选择器类似当内容文本较长时t-tree-select下拉树选择器组件的悬浮层限制最大宽度为1000px最大高度为300px同样可以通过设置popupProps属性向内部的悬浮层组件透传样式。示例 t-tree-selectv-modelchecked:dataselectList:tree-props{keys: { label: name, value: id },expandAll: true,}:popupProps{overlayInnerStyle: {maxWidth: 400px,maxHeight: 200px,},}/t-tree-select
四、t-enhanced-table树形表格
问题1动态配置表格列时经常出现表格列错乱、组件源码报错阻塞页面进程等问题。
解决方法给表格配置动态key使vue强制重新渲染。
问题2为了优化界面交互通常表格会添加loading在表格请求前加载在接口数据请求赋值完后关闭loading有时接口报错后会阻塞代码继续运行导致loading一直存在。
解决方法给方法添加try catch捕获错误在catch中重新将表格的loading关闭。
