解决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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
为指定元素增加样式的js代码
Dec 09 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python语言使用技巧分享
2016/05/31 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Django实现跨域请求过程详解
2019/07/25 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
思想品德自我鉴定
2013/10/12 职场文书
税务专业毕业生自荐信
2013/11/10 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
业务员辞职信范文
2015/03/02 职场文书
银行求职信模板
2015/03/20 职场文书
如何用python绘制雷达图
2021/04/24 Python
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js