需求:给标题这一列的数据绑定点击事件,实现交互
第一种:在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,
}
}