antd 表格ellipsis 与 scopedSlots 一起使用

1、第一种情况，超出有省略号，但鼠标移上去不显示内容

<template slot="information" slot-scope="text, record">
  <span>测站编码：{{ record.stationCode }}</span
  ><br />
  <span>测站名称：{{ record.stationName }}</span
  ><br />
  <span>测站区域：{{ record.stationRegion }}</span>
</template>
{
  title: "测站信息",
  scopedSlots: { customRender: "information" },
  ellipsis: true
},

2、第二种情况，没有省略号，但鼠标移上去显示内容

<span slot="deviceInfo" slot-scope="record" class="infoBox">
  <span>设备编码：{{ record.deviceCode }}</span>
  <span :title="record.manufacturesName">设备厂家：{{ record.manufacturesName }}</span>
  <span>设备类型：{{ record.deviceTypeName }}</span>
  <span>设备型号：{{ record.deviceModelName }}</span>
</span>
{
  title: "设备信息",
  scopedSlots: {
    customRender: "deviceInfo",
  },
  ellipsis: true,
},

3、第三种，显示省略号和鼠标移上去显示全部信息

<template slot="deviceInfo" slot-scope="record">
  <span :title="record.deviceCode">设备编码：{{ record.deviceCode }}</span>
  <br />
  <span :title="record.manufacturesName">设备厂家：{{ record.manufacturesName }}</span>
  <br />
  <span :title="record.deviceTypeName">设备类型：{{ record.deviceTypeName }}</span>
  <br />
  <span :title="record.deviceModelName">设备型号：{{ record.deviceModelName }}</span>
</template>
{
  title: "设备信息",
  scopedSlots: {
    customRender: "deviceInfo",
  },
  ellipsis: true,
},

4、细心的朋友会发现，其实第二种是被样式影响了(使用span标签，块级元素会影响哦)

// 表格内信息
.infoBox {
  display: flex;
  flex-direction: column;
}

5、还有一种情况，使用了过滤器渲染数据

<span slot="type" slot-scope="text">
  <span :title="text | showType">{{ text | showType }}</span>
</span>

filters: {
  showType(val) {
    switch (val) {
      case 0:
        return '勘察调研上报'
      case 100:
        return '施工情况上报'
      case 300:
        return '运维信息上报'
      case 301:
        return '巡检'
      case 302:
        return '设备校准'
      case 303:
        return '临时性计划'
      case 304:
        return '告警'
      default:
        return '--'
        break;
    }
  }
},

6、又遇到另一种新情况，通过循环渲染的数据

<template #conditions="{record}">
  <span
    v-for="(item, index) in record.conditionList"
      :key="index + 1"
  >
    <span :title="(index + 1 == 1?'①': index + 1 == 2?'②': index + 1 == 3?'③': index + 1 == 4? '④': '⑤') + item.name + item.exp + item.value + item.unit + item.dataReportName + item.cycleName">
      <span v-if="index + 1 == 1">①</span>
      <span v-if="index + 1 == 2">②</span>
      <span v-if="index + 1 == 3">③</span>
      <span v-if="index + 1 == 4">④</span>
      <span v-if="index + 1 == 5">⑤</span>
      <span>{{ item.name }}</span>
      <span>{{ item.exp }}</span>
      <span>{{ item.value }}</span>
      <span>{{ item.unit }}</span>
      <span>{{ item.dataReportName }}</span>
      <span>{{ item.cycleName }}</span>
    </span>
    <br />
  </span>
</template>

人因热爱生活而更容易被治愈！