【vue3+ts+ant】a-table的column绑定点击事件的两种方式

需求：给标题这一列的数据绑定点击事件，实现交互

第一种：在dom里面插入标签，并绑定点击事件

<template>
  <a-table :columns="columns" :data-source="dataSource" bordered>
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'title'">
        <a @click="handleTiTle">点击标题-{{ record.title }}</a>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
	const columns = [
	  {
	    title: '标题',
	    dataIndex: 'title',
	    width: '40%',
	  },
	  {
	    title: 'operation',
	    dataIndex: 'operation',
	  },
	]
	
	const handleTiTle = () => {
		console.log("点击标题")
	}
</script>

第二种：使用column的customRender属性：customRender生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，该方法适用于二次封装后无法在dom里面插入template的情况

// 假设custom-table是封装过的a-table
<template>
	<custom-table
	  size="small"
	  :bordered="true"
	  :columns="columns"
	  :data-source="tableData"
	  :pagination="pagination"
	  :loading="loading"
	  :scroll="{ y: tableHeight }"
	/>
</template>

<script lang="tsx" setup>
	const handleTitle = () => {
		console.log("点击标题")
	}
	const columns: TableColumnType[] = [
	    {
	      title: '标题',
	      dataIndex: 'title',
	      ellipsis: true,
	      customRender: ({ record, text }) => {
	      	// customRender的返回值要遵循vue-jsx语法,要加()和换行
	        return (
	        	<a onClick={handleTitle.bind(this, text, record)}>{text}</a>
	        )
	      },
	    },
	]
</script>

注意：使用customeRender这种写法的时候有个很重要的点，就是如果是把script的部分做了剥离，放在了ts文件中通过引入的方式来使用的时候，一定要把ts文件改成tsx文件，因为ts和jsx语法有冲突，但是tsx却可以兼容jsx

例如：

<template>
	<custom-table
	  size="small"
	  :bordered="true"
	  :columns="columns"
	  :data-source="tableData"
	  :pagination="pagination"
	  :loading="loading"
	  :scroll="{ y: tableHeight }"
	/>
</template>

<script lang="ts" setup>
import useColumns from "./useColumns"

const { columns } = useColumns()
</script>

// useColumns.tsx
export default function() {
	const handleTitle = () => {
		console.log("点击标题")
	}
	
	const columns: TableColumnType[] = [
	    {
	      title: '标题',
	      dataIndex: 'title',
	      ellipsis: true,
	      customRender: ({ record, text }) => {
	        return (
	        	<a onClick={handleTitle.bind(this, text, record)}>{text}</a>
	        )
	      },
	    },
	]

	return {
		columns,
	}
}