vue项目中,Mac电脑中设置了table的show-overflow-tooltip有时会不生效
比如设置了客户单号的列宽度和show-overflow-tooltip,结果Mac电脑上显示效果是这样的,客户单号撑开了,不是指定的宽度。
只有在有动态列显示的情况下会出现

<el-table ref="multipleTable" v-loading="tableLoading" :data="tableData" highlight-current-row @current-change="rowClick" @selection-change="handleSelectionChange" height="calc(100vh - 280px)" border :cell-style="getCellStyle"> <el-table-column type="selection" width="40" fixed="left" /> <el-table-column label="序号" width="50" fixed="left"> <template slot-scope="scope"> <span>{{ scope.$index + 1 }}</span> </template> </el-table-column> <el-table-column prop="jobNo" label="运单编号" show-overflow-tooltip width="130px" min-width="130" /> <el-table-column prop="deliveryNo" label="客户单号" show-overflow-tooltip width="150px" /> <el-table-column prop="stateName" label="运单状态" width="80px" /> <!-- 动态列 --> <el-table-column v-for="item in columnlist" :prop="item.prop" :label="item.label" show-overflow-tooltip :width="item.width" v-if="item.check" /> <el-table-column prop="custom101" label="订单属性1" show-overflow-tooltip width="150px" /> <el-table-column fixed="right" label="操作" width="80px"> <template slot-scope="scope"> <el-link :underline="false" type="primary" @click="detail(scope.row)">详情</el-link> </template> </el-table-column> </el-table> // 默认列配置 defaultColumnList: [ { label: '运输类型', prop: 'transportTypeName', check: true, width: '120px' }, { label: '目的网点', prop: 'destOrganizationName', check: true, width: '120px' }, { label: '接单日期', prop: 'carrierDate', check: true, width: '120px' }, { label: '始发地', prop: 'startCity', check: true, width: '100px' }, { label: '目的地', prop: 'destinationCity', check: true }, { label: '发货单位', prop: 'customerShortName', check: true, width: '160px' }, { label: '所属项目', prop: 'project', check: true, width: '160px' }, { label: '收货单位', prop: 'receiveName', check: true, width: '160px' }, { label: '收货联系人', prop: 'receiveContact', check: true, width: '110px' }, { label: '收货手机', prop: 'receiveMobile', check: true, width: '100px' }, { label: '收货电话', prop: 'receiveTel', check: true, width: '120px' }, { label: '收货地址', prop: 'receiveAddress', check: true, width: '150px' }, { label: '承运商', prop: 'acarrierName', check: true, width: '150px' }, { label: '运输方式', prop: 'transportMode', check: true }, { label: '送货方式', prop: 'deliveryMode', check: true }, { label: '结算方式', prop: 'settleMode', check: true }, { label: '货物名称', prop: 'partDesc', check: true }, { label: '件数', prop: 'eaQty', check: true }, { label: '箱数', prop: 'csQty', check: true }, { label: '托数', prop: 'plQty', check: true }, { label: '重量', prop: 'weight', check: true }, { label: '体积', prop: 'volume', check: true }, { label: '回单要求', prop: 'oddsRequest', check: true, width: '160px' }, { label: '回单编号', prop: 'oddsNo', check: true, width: '160px' }, { label: '送货时间要求', prop: 'deliveryTimeRequirement', check: true, width: '120px' }, { label: '送货车辆限高', prop: 'vehicleHeightLimit', check: true, width: '100px' }, { label: '线路号', prop: 'conLineNo', check: true, width: '80px' }, { label: '订单备注', prop: 'remark', check: true, width: '160px' }, { label: '开单员', prop: 'createBy', check: true, width: '80px' }, ],
解决方法:
把所有的列宽度都加上,都设置下show-overflow-tooltip。最终能正常显示


浙公网安备 33010602011771号