欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法

 更新時(shí)間:2023年06月06日 11:44:01   作者:GhostPaints  
最近參與web開(kāi)發(fā)時(shí),讓我解決一個(gè)elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下

項(xiàng)目上有一個(gè)需求,需要用el-table來(lái)顯示數(shù)據(jù),有一個(gè)要求就是不能換行。表頭不能換行,表格里面的內(nèi)容也不能換行。

同事寫(xiě)的頁(yè)面使用的是vue3,自定義了一個(gè)事件來(lái)動(dòng)態(tài)變化每一列的參數(shù)。我將其挪用到vue2中完全沒(méi)法使用。只能在網(wǎng)上查找資料來(lái)實(shí)現(xiàn)它。

表格通過(guò)接口來(lái)獲取,接口中將表頭標(biāo)題和表格內(nèi)容分開(kāi)來(lái)的。

基本思路就是:表格內(nèi)容限制不換行,不使用縮略符號(hào)。

首先從表頭開(kāi)始,在el-table-column中有一個(gè)render-header

    // 表頭部重新渲染
		renderHeader(h, { column, $index }) {
			// 新建一個(gè) span
			let span = document.createElement('span');
			// 設(shè)置表頭名稱(chēng)
			span.innerText = column.label;
			// 臨時(shí)插入 document
			document.body.appendChild(span);
			// 重點(diǎn):獲取 span 最小寬度,設(shè)置當(dāng)前列,注意這里加了 20,字段較多時(shí)還是有擠壓,且渲染后的 div 內(nèi)左右 padding 都是 10,所以 +20 。(可能還有邊距/邊框等值,需要根據(jù)實(shí)際情況加上)
			column.minWidth = (span.getBoundingClientRect().width) + 40;
            this.headerLableWidth[column.property] = column.minWidth;
			// 移除 document 中臨時(shí)的 span
			document.body.removeChild(span);
			return h('span', column.label);
		},

column中有這些標(biāo)題文字信息, 創(chuàng)建一個(gè)span標(biāo)簽,添加到文檔流中,然后拿到它的寬度,為了多加點(diǎn)寬度,可以額外多加些數(shù)值。代碼中多加了40寬度。為表頭設(shè)置最小寬度。

記錄這一列的最小寬度,當(dāng)表格內(nèi)容動(dòng)態(tài)設(shè)置寬度的時(shí)候,至少要給定成表頭的寬度。不然表頭會(huì)因?yàn)闆](méi)有內(nèi)容寬度變成0.

    flexColumnWidth(str, arr1, flag = 'max'){
      // str為該列的字段名(傳字符串);tableData為該表格的數(shù)據(jù)源(傳變量);
      // flag為可選值,可不傳該參數(shù),傳參時(shí)可選'max'或'equal',默認(rèn)為'max'
      // flag為'max'則設(shè)置列寬適配該列中最長(zhǎng)的內(nèi)容,flag為'equal'則設(shè)置列寬適配該列中第一行內(nèi)容的長(zhǎng)度。
      str = str + ''
      let columnContent = ''
      if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
        return
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return
      }
      if (flag === 'equal') {
        // 獲取該列中第一個(gè)不為空的數(shù)據(jù)(內(nèi)容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str].length > 0) {
            // console.log('該列數(shù)據(jù)[0]:', arr1[0][str])
            columnContent = arr1[i][str]
            break
          }
        }
      } else {
        // 獲取該列中最長(zhǎng)的數(shù)據(jù)(內(nèi)容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str] === null) {
            return
          }
          const now_temp = arr1[i][str] + ''
          const max_temp = arr1[index][str] + ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index][str]
      }
      // console.log('該列數(shù)據(jù)[i]:', columnContent)
      // 以下分配的單位長(zhǎng)度可根據(jù)實(shí)際需求進(jìn)行調(diào)整
      let flexWidth = 0
      for (const char of String(columnContent)) {
        if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
          // 如果是英文字符,為字符分配8個(gè)單位寬度
          flexWidth += 10
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
          // 如果是中文字符,為字符分配15個(gè)單位寬度
          flexWidth += 18
        } else {
          // 其他種類(lèi)字符,為字符分配8個(gè)單位寬度
          flexWidth += 10
        }
      }
      if (flexWidth < this.headerLableWidth[str]) {
        // 設(shè)置最小寬度
        flexWidth = this.headerLableWidth[str]
      }
      // if (flexWidth > 250) {
      //   // 設(shè)置最大寬度
      //   flexWidth = 250
      // }
      // console.log(flexWidth)
      return flexWidth + 'px'
    }
  }

el-table-column標(biāo)簽中的width使用函數(shù)方法來(lái)代替。

完整的el-table如下

        <el-table 
          :ref='tableRef'
          :data="certRecordInfos"
          border
          :fit="true"
          style="width: 100%">
          <el-table-column
            align="center"
            :render-header="renderHeader"
            :width="flexColumnWidth(item.key,certRecordInfos)"
            :key="item.key" 
            :prop="item.key"  
            :label="item.value" >
          </el-table-column>
        </el-table>

因?yàn)樾枰全@取到表頭的最小寬度,因此需要先加載表頭,才能確保后面加載表格內(nèi)容的時(shí)候,能正確的設(shè)置寬度。

在watch中,觀察這兩個(gè)數(shù)組,當(dāng)發(fā)現(xiàn)變化的時(shí)候,去重新刷新這個(gè)table

    certHeaderList: {
      deep: true,
      handler: function (val) {
        this.$nextTick(() => {
          this.$refs[`${this.tableRef}`].doLayout();
        })
      }
    },
    certRecordInfos: {
      deep: true,
      handler: function (val) {
        this.$nextTick(() => {
          this.$refs[this.tableRef].doLayout();
        })
      }
    }
        this.certHeaderList.splice(0)
        this.certRecordInfos.splice(0)
        const resultHeader = val[0].header
        resultHeader.forEach((header)=>{
          let map = {key:header.columnName,value:header.columnDesc};
          this.certHeaderList.push(map);
        });
        setTimeout(() => {
          const resultList = val[0].list
          this.certRecordInfos.push(...resultList)
        }, 1000);

要實(shí)現(xiàn)效果,必須要確保已經(jīng)拿到了表格每一列表頭的最小寬度。并使用headerLableWidth記錄下來(lái)。

另外,需要為表格內(nèi)容進(jìn)行設(shè)置,確保內(nèi)容不會(huì)進(jìn)行換行和使用縮略符號(hào)。

/deep/ .el-table th, .el-table td {
  white-space: nowrap;
}
/deep/ .el-table .cell {
  display: inline-block;
  white-space: nowrap;
  width: auto;
  overflow: auto;
}
/deep/ .el-table .el-table__body-wrapper {
  overflow-x: auto;
}

總結(jié)

到此這篇關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的文章就介紹到這了,更多相關(guān)el-table表頭和內(nèi)容一行顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue-cli監(jiān)聽(tīng)組件加載完成的方法

    vue-cli監(jiān)聽(tīng)組件加載完成的方法

    今天小編就為大家分享一篇vue-cli監(jiān)聽(tīng)組件加載完成的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue中引入bootstrap.min.css的正確姿勢(shì)分享

    Vue中引入bootstrap.min.css的正確姿勢(shì)分享

    這篇文章主要介紹了Vue中引入bootstrap.min.css的正確姿勢(shì),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法

    vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法,文中的實(shí)現(xiàn)步驟講解詳細(xì),并且有詳細(xì)的代碼示例,需要的小伙伴可以參考一下
    2023-10-10
  • vue項(xiàng)目中form?data形式傳參方式

    vue項(xiàng)目中form?data形式傳參方式

    這篇文章主要介紹了vue項(xiàng)目中form?data形式傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue3.x:報(bào)錯(cuò)清單及解決記錄

    vue3.x:報(bào)錯(cuò)清單及解決記錄

    這篇文章主要為大家介紹了vue3.x:報(bào)錯(cuò)清單及解決記錄詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • 淺析vue3的setup的使用和原理

    淺析vue3的setup的使用和原理

    setup是Vue3中引入的一個(gè)新的組件選項(xiàng),是Vue3中函數(shù)式組件的核心部分,它提供了一種新的方式來(lái)編寫(xiě)組件邏輯,下面就來(lái)和大家講講它的使用和原理
    2023-08-08
  • 如何使用yarn創(chuàng)建vite+vue3&&electron多端運(yùn)行

    如何使用yarn創(chuàng)建vite+vue3&&electron多端運(yùn)行

    這篇文章主要介紹了如何使用yarn創(chuàng)建vite+vue3&&electron多端運(yùn)行,本文分步驟給大家介紹的非常詳細(xì),包括使用yarn創(chuàng)建vite+vue3項(xiàng)目會(huì)遇到哪些問(wèn)題,感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解

    vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解

    本文介紹如何在Vue項(xiàng)目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過(guò)引用并調(diào)用ElQuarterPicker.vue組件來(lái)實(shí)現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧
    2024-09-09
  • vue實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果

    vue實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果

    這篇文章主要介紹了vue實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-05
  • vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)

    vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)

    這篇文章主要介紹了vue中對(duì)象數(shù)組去重的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02

最新評(píng)論