vue项目中,Mac电脑中设置了table的show-overflow-tooltip有时会不生效

比如设置了客户单号的列宽度和show-overflow-tooltip,结果Mac电脑上显示效果是这样的,客户单号撑开了,不是指定的宽度。

只有在有动态列显示的情况下会出现

image

 

    <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。最终能正常显示

image

 

posted @ 2026-07-02 11:40  何以平天下  阅读(2)  评论(0)    收藏  举报