快捷導(dǎo)航

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

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

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

示例：

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

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

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

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

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

這個方法并不是特別好，因為他可能會出現(xiàn)table慢慢變?。ǘ皇撬查g變?。┑那闆r，所以看起來并不是特別好。

2、給Table組件一個確定的計算值

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

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

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

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

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

補充知識：iview表格Table表頭動態(tài)化實現(xiàn)

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

表格還是這么簡單

<Col span="8"> 時 間：
 <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>

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

處理tableColumns的函數(shù)

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

// 初始化表頭
  columsInit () {
   let timeStr1 = this.$utils.time.formatTime(this.searchParams.sDate, 'YYYY-MM')
   let startMonth = timeStr1 + '月維護企業(yè)數(shù)'
   let timeStr2 = this.$utils.time.formatAddTime(this.searchParams.sDate, 'YYYY-MM', 1, 'months')
   let midMonth = timeStr2 + '月維護企業(yè)數(shù)'
   let timeStr3 = this.$utils.time.formatTime(this.searchParams.eDate, 'YYYY-MM')
   let endMonth = timeStr3 + '月維護企業(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組件寬度只變大不變小的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: