解決Antd Table組件表頭不對(duì)齊的問題

更新時(shí)間：2020年10月27日 15:09:06 作者：SunnyQK

這篇文章主要介紹了解決Antd Table組件表頭不對(duì)齊的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

背景：

在使用Antd的table組件時(shí)，由于表頭參數(shù)過多，于是設(shè)置了scroll屬性，在其超出一定寬度后進(jìn)行滾動(dòng)

但是在添加了該屬性之后，經(jīng)常會(huì)出現(xiàn)表頭不對(duì)齊的問題：

針對(duì)該問題Google 了一下解決方案，但大多不是很完善，為解決問題?，F(xiàn)整理下完整的解決方案：

1、對(duì)表格的每一行【columns】設(shè)置width屬性（留出一行進(jìn)行寬度自適應(yīng)）；

2、scroll屬性中的x選擇一個(gè)合適的值（或者直接設(shè)為 max-content）；

如果以上兩步仍解決不了對(duì)齊問題的話，請(qǐng)繼續(xù)第三步操作

3、對(duì)table的每一個(gè)td 添加 className=“word-wrap”，并設(shè)置對(duì)應(yīng)樣式

（因?yàn)閠d內(nèi)部的內(nèi)容在出現(xiàn)連續(xù)字母或數(shù)字的時(shí)候不會(huì)主動(dòng)換行），導(dǎo)致td內(nèi)部寬度撐開，與th寬度不一致

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

以上操作完成之后可能還是有問題（請(qǐng)檢查下是不是表頭中內(nèi)容的寬度默認(rèn)被撐開了），然后重新調(diào)整下column中的width即可

近期在開發(fā)的過程中，另發(fā)現(xiàn)了一種非常有效得解決方案，特與大家分享：

在對(duì)columns的每一項(xiàng)設(shè)置了寬度后，如果還是有錯(cuò)位問題的話，可以嘗試在columns的末位push一個(gè)空的column進(jìn)行占位，這個(gè)空的column不用設(shè)置寬度，任其自適應(yīng)。

注意：該column的title需要設(shè)置為空字符串，避免在界面上將其渲染出來

補(bǔ)充知識(shí)：vue實(shí)現(xiàn)超過兩行顯示展開收起

基于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 加載完執(zhí)行
  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: {
  // 計(jì)算文字 顯示展開 收起
  calculateText () {
   // 獲取一行文字的height 計(jì)算當(dāng)前文字比較列表文字
   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組件表頭不對(duì)齊的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: