快捷導(dǎo)航

解決iView Table組件寬度只變大不變小的問題

更新時(shí)間：2020年11月13日 11:21:03 作者：Headmaster_Tan

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

示例：

<Table class="my-table"></Table>

打開開發(fā)者工具其實(shí)你可以發(fā)現(xiàn)iView給table標(biāo)簽的寬度加上了一個(gè)明確的寬度值，而且在父元素變小的時(shí)候這個(gè)值并沒有相應(yīng)地變小，所以才會(huì)導(dǎo)致的iView Table組件只會(huì)變大不會(huì)變小。

那么我們就可以根據(jù)這個(gè)原因才決定解決方案

1、給Table組件的table標(biāo)簽設(shè)置一個(gè)important的width

.my-table table {
 width: 100% !important;
}

這個(gè)方法并不是特別好，因?yàn)樗赡軙?huì)出現(xiàn)table慢慢變?。ǘ皇撬查g變小）的情況，所以看起來并不是特別好。

2、給Table組件一個(gè)確定的計(jì)算值

.my-table {
 width: calc(100% - 100px);
}

這個(gè)方法在目前我已知的方法里是最優(yōu)的。

3、不要給Table組件的columns參數(shù)中添加width屬性（未驗(yàn)證）

columns: [{
 title: '標(biāo)題',
 width: 200 // 不加這東西
}]

這個(gè)方法是網(wǎng)友給的，我沒驗(yàn)證不知道有沒有用。

補(bǔ)充知識(shí)：iview表格Table表頭動(dòng)態(tài)化實(shí)現(xiàn)

業(yè)務(wù)邏輯：根據(jù)日期，時(shí)間篩選跨度固定為3個(gè)月，獲取數(shù)據(jù)，表格動(dòng)態(tài)按月份展示，看圖

表格還是這么簡(jiǎn)單

<Col span="8"> 時(shí) 間：
 <Date-picker type="month" format="yyyy-MM" :clearable='false' :editable='false' :options="startOption" v-model="searchParams.sDate" style="width: 200px"></Date-picker>&emsp;至&emsp;
 <Date-picker type="month" format="yyyy-MM" :clearable='false' :editable='false' :options="endOption" v-model="searchParams.eDate" style="width: 200px"></Date-picker>
</Col>
<Table stripe :columns="tableColumns" :data="tableData"></Table>

思路：固定時(shí)間跨度監(jiān)聽解決不贅述，搜索獲取數(shù)據(jù)后，對(duì)tableColumns，進(jìn)行處理，（push,splice,uhshift…都可以）引起DOM刷新，

處理tableColumns的函數(shù)

this.$utils.time.formatTime為封裝好的時(shí)間處理函數(shù)，moment.js

// 初始化表頭
  columsInit () {
   let timeStr1 = this.$utils.time.formatTime(this.searchParams.sDate, 'YYYY-MM')
   let startMonth = timeStr1 + '月維護(hù)企業(yè)數(shù)'
   let timeStr2 = this.$utils.time.formatAddTime(this.searchParams.sDate, 'YYYY-MM', 1, 'months')
   let midMonth = timeStr2 + '月維護(hù)企業(yè)數(shù)'
   let timeStr3 = this.$utils.time.formatTime(this.searchParams.eDate, 'YYYY-MM')
   let endMonth = timeStr3 + '月維護(hù)企業(yè)數(shù)'
   this.tableColumns.splice(3, 4,
    {
     title: startMonth,
     align: 'center',
     render: (h, params) => {
     //下面業(yè)務(wù)邏輯直接不用看
      // console.log(timeStr1)
     /*  let arr = params.row.historyDataListDto || [];
      let obj = null
      arr.forEach((item, index) => { //有些人員，有些月份的數(shù)據(jù)沒有
       if (item.month == timeStr1) {
        obj = arr[index]
       }
      })
      if (obj) {
       return h('a', {
        on: {
         click: () => {
          this.toDetail(params.row.uId, params.row.class2Id, obj.month, obj.month, obj.dirId)
         }
        }
       }, obj.whsNum)
      } else {
       return h('span', '--')
      }
     */業(yè)務(wù)邏輯
     }
    },
    {
     title: midMonth,
     align: 'center',
     render: (h, params) => {
     
     }
    },
    {
     title: endMonth,
     align: 'center',
     render: (h, params) => {
      
     }
    },
    {
     title: '平均',
     align: 'center',
     key: 'avgNum'
    }
   )
  },

以上這篇解決iView Table組件寬度只變大不變小的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: