arco-design：table组件列使用了tsx语法，点击“查看”显示弹窗信息

前言

最近在一个大屏项目中使用到arco-design，版本为2.52.1；
使用Vue3、TypeScript，table组件列使用了tsx语法，在使用tsx语法时遇到列无法正常显示查看点击按钮；

主要问题

以下是解决方法，主要代码如下

列表template

<template>
	<div class="table_alarm">
      
      <a-table
        row-key="key"
        size="mini"
        :columns="columns"
        :loading="state.loading"
        stripe
        :pagination="{ total: pagination.total, current: pagination.current, pageSize: pagination.pageSize }"
        @page-change="changeCurrent"
        page-position="br"
        :data="state.alarmData"
        :scroll="scroll"
      />
    div>
   template>

列columns及配置

<script setup lang="tsx" name="ChartsStatistics">
const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 70
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    width: 130
  },
  {
    title: '设备编号',
    dataIndex: 'deviceCode',
    width: 130
  },
  {
    title: '所属工程',
    dataIndex: 'projectName',
    ellipsis: true,
    tooltip: true,
    width: 200
  },
  {
    title: '报警内容',
    dataIndex: 'callContent',
    ellipsis: true,
    tooltip: true,
    width: 200
  },
  {
    title: '解决方式',
    dataIndex: 'solveContent',
    ellipsis: true,
    tooltip: true,
    width: 350
  },
  {
    title: '示意图',
    width: 90,
    render: ({ record, column, rowIndex }) => { //tsx语法设置span
      return (
        <span
          style={{ color: '#4181FF', cursor: 'pointer' }}
          onClick={() => {
            getView(record)
          }}>
          查看
        </span>
      )
    }
  },
  {
    title: '报警时间',
    dataIndex: 'callTime',
    width: 230
  }
]
</script>

详细说明

注意：
此处lang=“tsx” 下面columns即可写tsx语法，不然会报错

注意：
这里span的样式写法 style={{ color:‘#4181FF’}}，与普通的style="color:‘#4181FF’"不同

点击事件@click写法为“OnClick={()=>{
//此处写方法或者对应的逻辑代码
}}”

---

有不足之处敬请指正~