Ant Design Vue 表格组件空数据统一处理 踩坑

transformCellText

提供 transformCellText 这个表格属性来做数据的处理

transformCellText	数据渲染前可以再次改变，一般用于空数据的默认配置	Function({ text, column, record, index }) => any，此处的 text 是经过其它定义单元格 api 处理后的数据，有可能是 VNode/string/number 类型

数据处理时，都是用text这个属性

划重点

text会有两种情况，这个才是坑的地方

• 非数组（直接就是要展示的数据）
• 是个数组（要展示的数据被数组包裹了一层）

text非数组情况

<a-table :dataSource="dataSource" :columns="columns" />

直接简单使用，不使用table组件的插槽，这个时候返回的就是要展示的数据

可以从图上看出，打印的text的结果

text是个数组

<template>
  <a-table :dataSource="dataSource" :columns="columns" :transformCellText="ssss">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'avatar'">
        <a-avatar :src="record.avatar" :style="{ backgroundColor: '#1890ff' }">
          {{ record.name?.charAt(0) }}
        </a-avatar>
      </template>
    </template>
  </a-table>
</template>

使用了table组件的bodyCell插槽，这个时候要展示的数据被数组包裹了一层

可以从图上看出，打印的text被数组包裹了一层

实践方案

既然text会有两种情况，就可以从两种情况下手，完成我们的需求

// 当返回的类型是VNode时，不用特殊处理，因为VNode是自定义的dom 直接渲染
const handleTransform = ({ text }) => {

  const isEmpty = val => val === null || val === undefined || val === ''

  const target = Array.isArray(text) ? (text.length > 0 ? text[0] : undefined) : text

  return isEmpty(target) ? '--' : text
}