解决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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
Vue.js图片预览插件使用详解
2018/08/27 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python isinstance函数介绍
2015/04/14 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Python实现Dijkstra算法
2018/10/17 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python手写均值滤波
2020/02/19 Python
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
关于旅游的活动方案
2014/08/15 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript