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

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

Answer 2

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>