解决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 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
vue实现分页加载效果
Dec 24 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 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
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
linux iconv方法的使用
2011/10/01 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
文字幻灯片
2006/06/26 Javascript
Javascript实现的分页函数
2006/12/22 Javascript
javascript编程起步(第六课)
2007/02/27 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
Position属性之relative用法
2015/12/14 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
python绘制地震散点图
2019/06/18 Python
python os.fork() 循环输出方法
2019/08/08 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
优秀实习生感言
2014/03/01 职场文书
一年级学生评语大全
2014/04/21 职场文书
幼儿教师求职信
2014/05/24 职场文书
保管员岗位职责
2015/02/14 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
三十年同学聚会感言
2015/07/30 职场文书
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python