arco-design:列tsx语法,点击弹窗

news2024/11/26 16:45:42

最近在一个大屏项目中使用到arco-design,版本为2.52.1;
主要代码如下

列表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={()=>{
//此处写方法或者对应的逻辑代码
}}”


有不足之处敬请指正~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1188659.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JavaEESpring】Spring Web MVC⼊⻔

Spring Web MVC 1. 什么是 Spring Web MVC1.1 什么是 MVC ?1.2 是什么 Spring MVC? 2. 学习 Spring MVC2.1 建立连接2.2 请求2.3 响应 3. 相关代码链接 1. 什么是 Spring Web MVC 官⽅对于 Spring MVC 的描述是这样的&#xff1a; 1.1 什么是 MVC ? MVC 是 Model View C…

os_cfg.h、os_cpu.h和ucos_ii.h

目录 文件组织代码研读#ifndef OS_CFG_H#if OS_TASK_STAT_EN > 0u 文件组织 os_cfg.h 用于定义操作系统&#xff08;OS&#xff09;的配置参数&#xff0c;例如任务数量、堆栈大小、时间片大小等。它通常包含了用户可以根据需求进行配置的宏定义。os_cpu.h 用于定义与特定CP…

Wireshark学习 与 TCP/IP协议分析

Wireshark简介和工具应用 如何开始抓包&#xff1f; 打开wireshark&#xff0c;显示如下网络连接。选择你正在使用的&#xff0c;&#xff08;比如我正在使用无线网上网&#xff09;&#xff0c;双击 可以先看下自己的ip地址和网关ip地址&#xff08;看抓包数据时候会用到&…

福州湾107㎡三室两厅两卫,温柔如风的奶油原木风,自由浪漫的灵魂。福州中宅装饰,福州装修

今天要分享的是一套面积107平米的奶油原木风三室两厅的案例。设计师于业主诉求中抽丝剥茧&#xff0c;汲取灵感&#xff0c;以大热的现代风格为主&#xff0c;暖色为主基调&#xff0c;配合原木肌理和巧思的质感细节装饰&#xff0c;最终打造出一种自由与惬意的空间。 01丨业 主…

api-ms-win-crt-runtime-l1-1-0.dll缺失了怎么解决?4个方法快速修复dll文件

在我们使用电脑的过程中&#xff0c;error提示框是我们不希望看到的事情之一。特别是像“api-ms-win-crt-runtime-l1-1-0.dll文件缺失”的错误&#xff0c;很可能会使一个应用程序完全无法运行。这种情况下&#xff0c;你一定感到头大。不过&#xff0c;请你不要担心。首先&…

英伟达发布RAPIDS cuDF框架 pandas在GPU上运行速度快了150倍

11月9日 消息&#xff1a;Nvidia 发布了一款名为 RAPIDS cuDF 的新版本&#xff0c;据称可以将 pandas 运行在 GPU 上&#xff0c;并且性能提升了150倍。pandas 是一款流行的基于 Python 的数据框架库&#xff0c;用于数据处理和分析。它的开源版本由 Wes McKinney 开发和发布&…

通达OA get_datas.php前台sql注入-可获取数据库session登入后台漏洞复现 [附POC]

文章目录 通达OA get_datas.php前台sql注入-可获取数据库session登入后台漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 通达OA get_datas.php前台sql注入-可获取数据库session登入后台漏洞复现…

2023年【A特种设备相关管理(锅炉压力容器压力管道)】考试内容及A特种设备相关管理(锅炉压力容器压力管道)考试技巧

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;考试内容根据新A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;考试大纲要求&#xff0c;安全生产模拟考试一点通将A特种设备相关管理…

python定时任务scheduler根据参数执行

python执行定时任务请参考&#xff1a;python使用apscheduler每隔一段时间自动化运行程序 传入参数时&#xff1a; 使用add_job函数中添加参数&#xff1a;args[参数1, 参数2]....传入参数顺序与对应位置一致 示例程序 import datetime from apscheduler.schedulers.backg…

基于安卓android微信小程序的校园互助平台

项目介绍 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和mysql数据库来完成对系统的设计。整…

动态表单获取某一项值

<template><div><el-form :model"form" :rules"rules" ref"form"><el-row v-for"(item,index) in form.list" :key"index"><el-col :span"6"><el-form-item label"用户名称…

华为昇腾云平台适配Baichuan2大模型记录

文章目录 环境准备资源查看MindFormers安装MindSpore安装CANN安装&#xff08;失败&#xff09;镜像拉取 模型下载模型单卡单次推理基于高阶接口推理基于Pipeline推理 模型单卡多次推理模型多卡多次推理微调数据模型准备全参微调Lora微调 环境准备 首先尝试从分配的默认环境适…

【JavaEESpring】认识Spring

认识Spring 1. 什么是框架2. SpringBoot 介绍2.1 Spring 的介绍2.2 SpringBoot 1. 什么是框架 框架(Framework) &#xff0c;意思是框架、机制、准则。通俗的来讲: 框架是实现某种功能的半成品, 他提供了⼀些常⽤的⼯具类, 我们在框架的基础上, 可以更加⾼效的进⾏开发 后端框…

SpringBoot整合Swagger3,赶紧整起来!

文章目录 一、Swagger是什么&#xff1f;二、使用步骤1.引入swagger3依赖2.添加swagger.conf配置类3.添加application.yml配置4.查看是否整合成功5.常用注解6.swagger美化 总结 一、Swagger是什么&#xff1f; Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用…

μC/OS-II---内核:多任务与调度

目录 内核&#xff1a;多任务与调度&#xff08;ucos_ii.h文件的函数&#xff09;Task创建Task创建&#xff08;扩展&#xff09;Task删除/请求删除Task改变Task优先级Task挂起和恢复Task信息获取Task调度器上锁和开锁 内核&#xff1a;多任务与调度&#xff08;ucos_ii.h文件的…

MCGS触摸屏

触摸屏上的接口 D型下载口又称为USB通信 网口下载方式称为TCP 流程 新建项目---- 下载线下载程序 网线下载 U盘下载 详细步骤 触摸屏仿真&#xff08;前提&#xff1a;必须连接PLC&#xff0c;且将程序写入PLC中&#xff09; 仿真要求&#xff1a;圆圈显示指示灯、显示…

Python教程:zipfile模块压缩文件

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 1、读取zip文件 要读取 ZIP 文件的内容&#xff0c;首先必须创建一个 ZipFile 对象&#xff08;请注意大写首字母 Z和 F&#xff09;。 ZipFile 对象在概念上与…

使用create-react-app脚手架创建react项目

查看npx版本&#xff1a; npx -v使用如下命令创建项目时&#xff1a; npx create-react-app demo报错&#xff1a; 解决&#xff1a; 以管理员身份运行cmd 然后再次创建项目&#xff0c;又报错&#xff1a; 经查得知&#xff1a;发生此错误是因为用户名中有空格&#xff0c;…

一手app拉新地推平台和网推平台升级啦 官签渠道直营

今天”聚量推客“升级啦 聚量推客是什么&#xff1f; 一手官签服务商&#xff0c;有大量的地推项目和网推项目&#xff0c;还有小说推文&#xff0c;流量卡推广&#xff0c;话费推广等众多推广场景平台 升级了什么&#xff1f; 今天为了让更多的地推团队和网推团队入驻我们…

(a)Mask RCNN总体流程

&#xff08;a&#xff09;Mask RCNN总体流程 一.Mask RCNN 架构 自己整理了一份Mask RCNN架构图如下&#xff0c;其中绿色模块只有推理过程才会涉及。 核心模块包括&#xff1a;数据预处理&#xff0c;骨干网络&#xff0c;区域提议网络&#xff0c;FastRCNN分支&#xff0c…