vue3使用ant-design，table的某一列数据，要求绑定点击事件进行跳转，但是table的columns这一列要求剥离写到一个单独的ts文件中，原先的写法就报错，怎么办？

Question

如题，这是现在的代码，这段代码是写在一个ts文件里面的，然后有需要的vue页面，就会引入这个ts文件中的cloumns，但是有一个问题，customRender要添加一个a标签然后绑定点击事件，原先return那样的写法会报错，好像是jsx语法和ts有冲突

请问怎么改，不会用ant-design

import type { TableColumnType } from 'ant-design-vue'
import dayjs from 'dayjs'

export const useNewsUtil = () => {
    router.push(`/newsInformationDetail/${record.id}`)
  }

  const columns: TableColumnType[] = [
    {
      title: '标题',
      ellipsis: true,
      customRender: ({text, record}) => {
        return {
          children: record.title,
          on: {
            click: function() {
              openNews.bind(this, record)
            }
          }
        }
        // return <a onClick={openNews.bind(this, record)}>{record.title}</a>
      }
    },
  ]

  return {
    columns,
  }
}

Answer 1

vue就不支持这样写columns。
建议参考官方文档：https://www.antdv.com/components/table-cn

1. columns定义

const columns = [{
  name: '标题',
  dataIndex:'title',
  ellipsis: true,
}]

2. 自定义列

<template #bodyCell="{ column, record }">
      <template v-if="column.key === 'title'">
        <a>
          {{ record.title }}
        </a>
      </template>
</template>

Answer 2

customRender的返回值遵循vue jsx语法，https://github.com/vuejs/babel-plugin-transform-vue-jsx。
render最好返回虚拟dom，如果返回标签的话，return和div之间加上换行和小括号。