element中的el-table布局问题，每行数据内，两行显示

Question

 

<el-table :data="tableData" border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="商品信息" prop="goodDetail"> </el-table-column>
      <el-table-column label="单位" prop="unit"></el-table-column>
      <el-table-column label="单价" prop="price"></el-table-column>
      <el-table-column label="数量" prop="num"></el-table-column>
      <el-table-column label="订单金额" prop="orderPrice"></el-table-column>
      <el-table-column prop="coupon">
        <template slot="header">
          <span class="colorRed">优惠金额</span>
        </template>
      </el-table-column>
      <el-table-column label="应付金额" prop="payPrice"></el-table-column>
      <el-table-column label="配送中心" prop="DC"></el-table-column>
      <el-table-column prop="station">
        <template slot="header">
          <span class="colorRed">提货点</span>
        </template>
      </el-table-column>
      <el-table-column label="财务状态" prop="financialStatus"></el-table-column>
      <el-table-column label="订单状态" prop="OrderStatus"></el-table-column>
      <el-table-column label="打印人" prop="printOne"></el-table-column>
      <el-table-column prop="supplier">
        <template slot="header">
          <span class="colorRed">供货商</span>
        </template>
      </el-table-column>
    </el-table>

tableData: [
          {
            name: '昵称',
            phoneNumber: '15600000000',
            goodsSubname:'小枕',
            goosSpec: '16包/箱 净含量:240m 口味: 原味 保质期: 常温45天',
            unit: '箱',
            price: '36.00',
            num: '30',
            orderPrice: '1080.00',
            orderTime: '2020-11-04 13:17:27',
            coupon: '0.00',
            payPrice: '1080.00',
            orderNumber: '60990120110400273',
            DC: 'A001',
            station: '307周青',
            financialStatus: '1',
            OrderStatus: '2',
            printOne: '',
            supplier: ''
          }
        ]

如何实现如上el-table表格布局

Answer 1

两种解决方案 1:单独增加那一列的width 2:给它show-overflow-tooltip 添加强制不换行,超出变···悬浮出详情属性