element ui el-table表格宽度根据元素宽度自适应_elementui table 宽度自适应

需求要将元素全部展示，用户自己拖动滚动条来查看元素。

1. 第一步设置表格内的元素不会自动隐藏，本人用的SCSS,使用样式穿透达到这一效果

   .table::v-deep .el-table .cell {
     white-space: nowrap;
     text-overflow: unset;
   }
   

2. 初始html,将fit设置为false,使伸缩窗口大小不会改变table

   <el-table :data="tableData" ref="table" :border="true" v-loading="loading" height="580px" :fit="false">
     <el-table-column prop="month" label="台账月份"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="corporateName" label="公司名"></el-table-column>
     <el-table-column prop="store" label="门店"></el-table-column>
     <el-table-column prop="projectType" label="项目类型" width="80"></el-table-column>
     <el-table-column prop="contractCode" label="合同编号"></el-table-column>
     <el-table-column prop="address" label="地址"></el-table-column>
     <el-table-column prop="amountReceivable" label="应收金额"></el-table-column>
     <el-table-column prop="paidInAmount" label="实收金额"></el-table-column>
     <el-table-column prop="isInvoicing" label="是否开票"></el-table-column>
     <el-table-column prop="client" label="委托人"></el-table-column>
   </el-table>
   

3. js代码如下，模拟调用接口

   created() {
     this.getData()
   },
   methods: {
     getData() {
       setTimeout(() => {
         this.tableData.push({
           month: '2022-05', date: '2022-05-18', corporateName: '长沙眷屋房地产中介有限责任公司AAA', store: '新环境藏珑店A店', projectType: '售', contractCode: 'C546123457812',
           address: '藏珑湖上国际花园5栋1单元1805A', amountReceivable: 180000, paidInAmount: 0, isInvoicing: false, client: ['委托人1', '委托人2', '委托人3']
         }, {
           month: '2022-05', date: '2022-05-18', corporateName: '长沙眷屋房地产中介有限责任公司', store: '新环境藏珑店A店BBB', projectType: '售', contractCode: 'C546123457812',
           address: '藏珑湖上国际花园5栋1单元1805ABBB', amountReceivable: 180000, paidInAmount: 0, isInvoicing: false, client: ['委托人1', '委托人2', '委托人3']
         }, {
           month: '2022-05', date: '2022-05-18', corporateName: '长沙眷屋房地产中介有限责任公司曹碾卡萨丁开发局', store: '新环境藏珑店A店BBB玄酒瓠脯vjkzcbjk', projectType: '售', contractCode: 'C546123457812',
           address: '藏珑湖上国际花园5栋1单元1805ABBB', amountReceivable: 180000, paidInAmount: 0, isInvoicing: false, client: ['委托人1', '委托人2', '委托人3']
         })
         this.rendering()
       }, 2000)
     },
   },
   

4. 核心渲染this.rendering()

    
   rendering() {
     this.$nextTick(() => {
       let header = this.$refs.table.$el.querySelector('.el-table__header-wrapper')
       let headerCol = header.querySelectorAll('col')
       let body = this.$refs.table.$el.querySelector('.el-table__body-wrapper')
       let bodyCol = body.querySelectorAll('col')
       let tr = body.querySelectorAll('tr')
       let maxLength = []
       tr.forEach((nodeList, i) => {
         let cell = nodeList.querySelectorAll('.cell')
         if (i >= 1) {
           let oldCell = tr[i - 1].querySelectorAll('.cell')
           cell.forEach((node, index) => {
             maxLength[index] = oldCell[index].scrollWidth > node.scrollWidth ? oldCell[index].scrollWidth : node.scrollWidth
           })
         } else {
           cell.forEach((node, index) => {
             maxLength.push(node.scrollWidth)
           })
         }
       });
       maxLength.forEach((element, index) => {
         headerCol[index].width = element + ''
         bodyCol[index].width = element + ''
       });
       this.loading = false
     })
   }
   

5. 到这一步已经完成，如果没有效果需要再加上一些css代码

    
   .table::v-deep .el-table,
   .table::v-deep .el-table__footer-wrapper,
   .table::v-deep .el-table__header-wrapper,
   .table::v-deep .el-table__body-wrapper {
     overflow: unset;
   }
    
   .table::v-deep .el-table {
     overflow-x: auto;
   }