antd 表格列宽自适应方法以及错误处理操作

 更新时间:2020年10月27日 15:01:17   作者:Knife_SX  
这篇文章主要介绍了antd 表格列宽自适应方法以及错误处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量

也就是没有设置宽度的列会平分表格中余下的宽度

在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度

表格横向滚动, 序号, 权属人左定位

antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的, 也就是说白色部分实际是原列, 只不过是被隐藏了

这个表格中只有序号有固定宽度, 那么余下所有列平分表格剩余宽度, 被定为的权属人的新列宽度是由内容撑开的, 所有新列比原列短, 就出现了空缺

表格空缺

结论:

所有被定位的列一定要设置固定宽度。

补充知识:antd table 表格错位的问题

当遇到antdtable表格错位的时候,看文档,文档上说的是,要设置每一列的宽度,但是已经设置了,却还是错位。后来经过查找资料,发现最后一列就不用设置的话,就不会再错位,因为antd会自己给最后一列分配宽度。

在这里还遇到一个问题,就是当我们给列设置的宽度不合理的话(一般情况是设置的宽度较小),也会错位。这个时候,只需要调整宽度就好

以上这篇antd 表格列宽自适应方法以及错误处理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解

    vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解

    这篇文章主要介绍了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
    2019-10-10
  • Vue3中操作ref的四种使用方式示例代码(建议收藏)

    Vue3中操作ref的四种使用方式示例代码(建议收藏)

    这篇文章主要介绍了Vue3中操作ref的四种使用方式示例代码(建议收藏),本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vite开发环境搭建详解

    Vite开发环境搭建详解

    Vite是一款非常轻量级的Web开发框架,它可以帮助开发者快速搭建一个开发环境。Vite搭建的开发环境可以提供更快的编译速度,更少的配置,更好的性能和更多的开发者友好性,使开发者可以更快地构建出功能强大的Web应用程序。
    2023-02-02
  • Element通过v-for循环渲染的form表单校验的实现

    Element通过v-for循环渲染的form表单校验的实现

    日常业务开发中,form表单校验是一个很常见的问题,本文主要介绍了Element通过v-for循环渲染的form表单校验的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue.js数据绑定操作详解

    vue.js数据绑定操作详解

    这篇文章主要介绍了vue.js数据绑定操作,结合实例形式详细分析了vue.js数据绑定的各种常见操作技巧与相关注意事项,需要的朋友可以参考下
    2018-04-04
  • el-form-renderer使用教程

    el-form-renderer使用教程

    本文主要介绍了el-form-renderer使用教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 一个可复用的vue分页组件

    一个可复用的vue分页组件

    这篇文章主要为大家详细介绍了一个可复用的vue分页组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue3中toRef与toRefs的区别

    Vue3中toRef与toRefs的区别

    这篇文章主要介绍了Vue3中toRef与toRefs的区别,toRefs与toRef功能一致,但可以批量创建多个ref对象,需要注意的是它只会解析对象的第一层属性,语法直接传入对象 toRefs,下面更多内容的介绍需要的小伙伴可以参考一下
    2022-03-03
  • Vue 3 中使用 vue-router 进行导航与监听路由变化的操作

    Vue 3 中使用 vue-router 进行导航与监听路由变化的操作

    在Vue3中,通过useRouter和useRoute可以方便地实现页面导航和路由变化监听,useRouter允许进行页面跳转,而useRoute结合watch可以根据路由变化更新组件状态,这些功能为Vue3应用增加了灵活性和响应性,使得路由管理更加高效
    2024-09-09
  • vue将秒数转成"时分秒"格式实例代码

    vue将秒数转成"时分秒"格式实例代码

    在项目中,请求后台接口返回的值是秒,这篇文章主要给大家介绍了关于vue将秒数转成"时分秒"格式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06

最新评论