需求要将元素全部展示，用户自己拖动滚动条来查看元素。
第一步设置表格内的元素不会自动隐藏，本人用的SCSS,使用样式穿透达到这一效果
.table::v-deep .el-table .cell {white-space: nowrap;text-overflow: unset;}
初始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>
js代码如下，模拟调用接口
created() {this.getData()},methods: {getData() {setTimeout(() => {this.tableData.push({month: '-05', date: '-05-18', corporateName: '长沙眷屋房地产中介有限责任公司AAA', store: '新环境藏珑店A店', projectType: '售', contractCode: 'C546123457812',address: '藏珑湖上国际花园5栋1单元1805A', amountReceivable: 180000, paidInAmount: 0, isInvoicing: false, client: ['委托人1', '委托人2', '委托人3']}, {month: '-05', date: '-05-18', corporateName: '长沙眷屋房地产中介有限责任公司', store: '新环境藏珑店A店BBB', projectType: '售', contractCode: 'C546123457812',address: '藏珑湖上国际花园5栋1单元1805ABBB', amountReceivable: 180000, paidInAmount: 0, isInvoicing: false, client: ['委托人1', '委托人2', '委托人3']}, {month: '-05', date: '-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)},},
核心渲染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})}
到这一步已经完成，如果没有效果需要再加上一些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;}
