ant-design-vue的table组件如何实现例如图片或者需经过处理后显示的列显示

<a-table
          :data-source="data.itesm[0]"
          :columns="columns"
          class="custom-table"
          :scroll="{ x: 'max-content' }"
      >
        <template #fileType="{ record }">
          <Image :fileType="record.fileType" />
        </template>
        <template #indexcloumn="{ index }">
          {{ index + 1 }}
        </template>
        <template #actionColumn="{ record }">
          <a-button type="primary" @click="toReview(record)">
            预览
          </a-button>
        </template>
      </a-table>

首先在组件中定义一个tamplate标签里边使用#定义一个插槽名称，后边="{record}"就可以获取到当前行的数据，然后在定义表头的数组对应的字段中这么写

const columns = ref([
  { title: '序号', dataIndex: 'index', key: 'index', slots: { customRender: 'indexcloumn' }, width: 90 },
  { title: '物料编码', dataIndex: 'materialcode', key: 'materialcode', ellipsis: true },
  { title: '物料名称', dataIndex: 'materialname', key: 'materialname', ellipsis: true },
  { title: '图号', dataIndex: 'drawingcode', key: 'drawingcode', ellipsis: true },
  { title: '物料描述', dataIndex: 'materialdesc', key: 'materialdesc', ellipsis: true },
  { title: '文件名称', dataIndex: 'fileName', key: 'fileName', ellipsis: true },
  { title: '文件类型', dataIndex: 'fileType', key: 'fileType', ellipsis: true, slots: { customRender: 'fileType' } },
  { title: '文件版本', dataIndex: 'drawingrevision', key: 'drawingrevision', ellipsis: true },
  { title: '操作', dataIndex: '', key: 'x', slots: { customRender: 'actionColumn' } }
]);



//这个是关键

slots: { customRender: 'template中定义的插槽名称' }