前言
最近在一个大屏项目中使用到arco-design,版本为2.52.1;
使用Vue3、TypeScript,table组件列使用了tsx语法,在使用tsx语法时遇到列无法正常显示查看点击按钮;
主要问题
以下是解决方法,主要代码如下
列表template
<template>
<div class="table_alarm">
<!-- @row-click="handleRowClick" -->
<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={()=>{
//此处写方法或者对应的逻辑代码
}}”
有不足之处敬请指正~