解决Antd Table组件表头不对齐的问题


Posted in Javascript onOctober 27, 2020

背景:

在使用Antd的table组件时,由于表头参数过多,于是设置了scroll属性,在其超出一定宽度后进行滚动

解决Antd Table组件表头不对齐的问题

但是在添加了该属性之后,经常会出现表头不对齐的问题:

解决Antd Table组件表头不对齐的问题

针对该问题Google 了一下解决方案,但大多不是很完善,为解决问题。现整理下完整的解决方案:

1、对表格的每一行 【columns】设置width属性(留出一行进行宽度自适应);

2、scroll属性中的x选择一个合适的值(或者直接设为 max-content);

如果以上两步仍解决不了对齐问题的话,请继续第三步操作

3、对table的每一个td 添加 className=“word-wrap”,并设置对应样式

(因为td内部的内容在出现连续字母或数字的时候不会主动换行),导致td内部宽度撑开,与th宽度不一致

.word-wrap {
 word-break: break-all;
}

以上操作完成之后可能还是有问题(请检查下是不是表头中内容的宽度默认被撑开了),然后重新调整下column中的width即可

近期在开发的过程中,另发现了一种非常有效得解决方案,特与大家分享:

在对columns的每一项设置了宽度后,如果还是有错位问题的话,可以尝试在columns的末位push一个空的column进行占位,这个空的column不用设置宽度,任其自适应。

注意:该column的title需要设置为空字符串,避免在界面上将其渲染出来

补充知识:vue实现超过两行显示展开收起

基于vue-cli2,sass,vant(ui组件):https://youzan.github.io/vant/#/zh-CN/home

具体代码如下:

<template>
 <div>
  <div class="group">
   <div class="text more" ref="more">
    占位
   </div>
   <div class="list" v-for="(item, index) in historyList" :key="index">
    <van-row>
     <van-col span="12">{{ item.version }}</van-col>
     <van-col class="t_right l_text" span="12">{{ item.time }}</van-col>
    </van-row>
    <div class="l_title">{{ item.title }}</div>
    <div
     class="text"
     ref="textContainer"
     :class="{ retract: item.status }"
     :style="{ 'max-height': item.status ? textHeight : '' }"
    >
     {{ item.content }}
    </div>
    <span
     v-if="item.status !== null"
     class="link"
     @click="more(index)"
     >{{ item.status ? "展开" : "收起" }}</span
    >
   </div>
  </div>
 </div>
</template>
<script>
export default {
 data () {
  return {
   textHeight: '',
   historyList: [
    {
     version: '7.1.4',
     title: '本次更新',
     content:
      '-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度,推荐;-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度,推荐',
     time: '2周前'
    },
    {
     version: '7.1.4',
     title: '本次更新',
     content:
      '-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度,推荐',
     time: '5周前'
    },
    {
     version: '7.1.4',
     title: '本次更新',
     content:
      '-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度,推荐;-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度,推荐',
     time: '6周前'
    },
    {
     version: '7.1.4',
     title: '本次更新',
     content:
      '-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度,推荐',
     time: '9周前'
    }
   ]
  }
 },
 mounted () {
  this.historyList.forEach((ele, index) => {
   this.$set(
    this.historyList,
    index,
    Object.assign({}, ele, { status: null })
   )
  })
  // DOM 加载完执行
  this.$nextTick(() => {
   this.calculateText()
   //console.log(this.historyList)
  })
 
  window.onresize = () => {
   this.historyList.forEach((ele, index) => {
    this.$set(
     this.historyList,
     index,
     Object.assign({}, ele, { status: null })
    )
   })
   setTimeout(() => {
    this.calculateText()
   }, 0)
  }
 },
 methods: {
  // 计算文字 显示展开 收起
  calculateText () {
   // 获取一行文字的height 计算当前文字比较列表文字
   let oneHeight = this.$refs.more.scrollHeight
   let twoHeight = oneHeight * 2 || 40
   this.textHeight = `${twoHeight}px`
   let txtDom = this.$refs.textContainer
   for (let i = 0; i < txtDom.length; i++) {
    let curHeight = txtDom[i].offsetHeight
    if (curHeight > twoHeight) {
     this.$set(
      this.historyList,
      i,
      Object.assign({}, this.historyList[i], { status: true })
     )
    } else {
     this.$set(
      this.historyList,
      i,
      Object.assign({}, this.historyList[i], { status: null })
     )
    }
   }
  },
  more (index) {
   this.historyList[index].status = !this.historyList[index].status
  }
 }
}
</script>
<style lang="scss" scoped>
.group {
 .list {
  padding: 5px 0;
  border-bottom: 1px solid #eaeaea;
 }
 .text {
  position: relative;
  color: #000;
  font-size: 14px;
 }
 .more {
  visibility: hidden;
 }
 .link {
  font-size: 12px;
  color: #2d95fe;
 }
 .retract {
  position: relative;
  overflow: hidden;
 }
 
 .retract:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 25px;
  padding-left: 25px;
  background: linear-gradient(to right, transparent, #fff 45%);
 }
}
</style>

以上这篇解决Antd Table组件表头不对齐的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Js利用prototype自定义数组方法示例
Oct 20 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 #Javascript
js实现简易ATM功能
Oct 27 #Javascript
Antd的table组件表格的序号自增操作
Oct 27 #Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 #Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 #Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 #Javascript
ant design 日期格式化的实现
Oct 27 #Javascript
You might like
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
js里的prototype使用示例
2010/11/19 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python实现滑雪者小游戏
2020/02/22 Python
个人素质的自我评价分享
2013/12/16 职场文书
财务负责人任命书
2014/06/06 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
员工离职证明范本
2015/06/12 职场文书
人民的好儿女观后感
2015/06/18 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android