切换el-tab 之后el-table会回缩问题

最新推荐文章于 2024-05-02 18:44:51 发布
最新推荐文章于 2024-05-02 18:44:51 发布
阅读量219 收藏
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66193671/article/details/137641434
版权

在写项目时碰到这个问题，有可能是因为某个<el-table-column>的min-width 给的太小了，导致小于label的长度，比如某个label为Description，这时候min-width 给80 就时不够的，会出现回缩现象，只要给足了就不会出现这个问题
问题图片：

修改min-width之后:

东之浩浩乎
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-tab切换导致el-table的部分样式错位
SDAW_1的博客
09-29 694
el-tab切换导致el-table的部分样式错位。
解决el-tabs 切换tab时el-table高度缩短问题
Cabriella_的博客
03-14 337
【代码】解决el-tabs 切换tab时el-table高度缩短问题。
el-tabs，el-tab-pane选项卡切换
蓦然回首，那人却在，灯火阑珊处。
03-07 2006
<el-tabs v-model="editableTabsValue" type="card" @tab-click="getListData"> data () { return { editableTabsValue: '0', // 头部标签 title_list: [], // 请求参数 goods_params: { course_category_id: 0, page_num:
el-table中的嵌套el-tab-pane嵌套el-table 设置dataRules解决记录
qq_42061351的博客
10-29 2303
嵌套关系如下： el-table |----el-tab-panel |--------el-table |------------el-table-column 按照网上给的方法，设置dataRules，发现不行。如果把prop改成planMap，dataRules中也设置相应的rule，能校验了，但是不管输入啥，都是报错，还有这个字段名就是name，不可能改后端返回的字段把。 这里采用手动加上校验的方法。 先写一个span，调一下样式 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存.
element中使用el-tab切换会出现闪屏
weixin_52544526的博客
01-12 769
v-if,v-show的区别，el-tab切换导致闪屏问题的解决
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 el[email protected]，使用前请熟悉：el[email protected]el[email protected]安装npm install --save el-table-infinite-...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Spring Cloud Gateway直接管理Vue.js的静态资源
wddblog的博客
04-28 850
1. 构建Vue.js应用像之前一样，构建你的Vue.js应用，并将生成的静态资源（位于dist目录）复制到Spring Boot项目的某个目录，比如。
element-ui的bug记录
nick_zhang的博客
04-29 490
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 520
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue2编写主体页面
5年编程经验的老猿。
04-28 424
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
Vue3 + TS + Element-Plus 封装的 Dialog 弹窗组件
单飞吧的博客
04-30 622
弹窗组件中自定义了表头增加了全屏，svg-icon 没有的话可能会报错，换成自己的图标就可以。
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
gaoyu007的博客
04-28 324
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
【Vue3】watch监听使用【超详细】
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
04-28 1042
沉默小管 【Vue3】watch监听使用【超详细】
Vue Canvas图片水印的绘制 图片加水印
生产队的驴
04-28 163
/
Vue.js(过渡)
qq_74472152的博客
04-28 658
过渡其实就是一个淡入淡出的效果。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
自定义表单元素组件内容变化触发ElForm重新校验
最新发布
东逝水
05-02 444
写一个FeeTypeSelector的组件，它的属性大概是这样的// 可选项的数据.......通过接收参数modelValue和触发update:modelValue让FeeTypeSelector组件支持v-model。至此这个组件就大致上写好了。把它放入带有规则的FormItem中，也能正常的校验。不过我今天发现，Element Plus的表单输入组件在有校验错误后再次输入正确的值后校验错误会自动消失，而不需要点击提交按钮调用form.validate方法，而上面的自定义组件就不能。
vue修改路由meta的标题
m0_50981596的博客
04-29 142
【代码】vue修改路由meta的标题。
el-tab滑动切换
11-15
el-tab可以通过设置type属性为"border-card"来实现滑动切换的效果。具体实现方法如下： 1.在HTML中添加el-tabs组件，并设置type属性为"border-card"，同时添加el-tab-pane组件作为每个tab的内容。 ```html <el-tabs type="border-card"> <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane> <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane> <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane> </el-tabs> ``` 2.在CSS中添加以下样式，实现滑动切换的效果。 ```css .el-tabs__header { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .el-tabs__item { display: inline-block; margin-right: 20px; } ``` 这样就可以实现el-tab的滑动切换效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值