Arco Design 之Table表格

news2024/9/24 3:27:18

此篇文章为table表格示例,包含列、data数据、展开、选中、自定义等相关属性

 基础表格

<a-table :columns="columns1" :data="tableData1" />

const columns1 = [
  { title: "编号", dataIndex: "no"},
  { title: "名称", dataIndex: "name"},
  { title: "性别", dataIndex: "sex"},
  { title: "年龄", dataIndex: "age", slotName: "age"}
];
const tableData1 = reactive([
  { name: "张三", no: "01", sex: "男",age:26 },
  { name: "秀儿", no: "02", sex: "女",age:25 },
  { name: "李四", no: "03", sex: "男",age:27 }
]);

可编辑表格 

<!-- 需要编辑的列 在columns里加对应的 slotName -->
<a-table :columns="columns1" :data="tableData1">
  <template #age="{ record, rowIndex }">
    <a-input v-model="record.age" />
  </template>
</a-table>

示例图 

图1-基础表格
图1-基础表格
图2-可编辑表格
图2-可编辑表格

此文章会持续更新 ~

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

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

相关文章

Linux线程2

线程相关函数 线程分离--pthread_detach&#xff08;后面会详细讲&#xff09; 函数原型&#xff1a;int pthread_datach(pthread_t thread); 调用该函数之后不需要 pthread_join 子线程会自动回收自己的PCB 杀死&#xff08;取消&#xff09;线程--pthread_cancel 取…

自动驾驶将驶向何方?大模型(World Models)自动驾驶综述

前言 自动驾驶系统的开发是一个技术与哲学的双重挑战&#xff0c;核心在于模拟人类的直觉推理和常识。尽管机器学习在模式识别上取得了进展&#xff0c;但在复杂情境下仍存在局限。人类决策基于感官感知&#xff0c;但能预见行动结果和预判变化&#xff0c;这是机器难以复制的…

欧科云链受邀参与EDCON 大会,听听OKLink为开发者带来哪些惊喜?

一年一度的 EDCON 大会于 7 月底在位于东京的联合国大学盛大举行。OKLink 与 Polygon 联手为来自全球各地的数千名开发者打造开放空间&#xff0c;带来多场精彩的主题分享&#xff0c;让开发者得以在上手体验的同时获取到关于最新开发工具的全面信息。 在论坛环节中&#xff0…

[Docker][Docker Container]详细讲解

目录 1.什么是容器&#xff1f;2.容器命令1.docker creatre2.docker run3.docker ps4.docker logs5.docker attach6.docker exec7.docker start8.docker stop9.docker restart10.docker kill11.docker top12.docker stats13.docker container inspect14.docker port15.docker c…

0730评价项目 实现数据库行转列查询

0730评价项目包-CSDN博客 数据库字段&#xff1a; 实现业务&#xff1a; 1&#xff09;查询对应部门&#xff0c;年份的员工季度评价信息&#xff1a; 对应sql语句&#xff1a; 使用 group by 和 GROUP_CONCAT 关键字进行行转列&#xff0c; case when 后接关联条件&#xf…

【Py/Java/C++三种语言详解】LeetCode 1334、LeetCode1334. 阈值距离内邻居最少的城市【全源最短路问题Floyd算法】

可上 欧弟OJ系统 练习华子OD、大厂真题 绿色聊天软件戳 od1441了解算法冲刺训练&#xff08;备注【CSDN】否则不通过&#xff09; 文章目录 相关推荐阅读**一、题目描述****二、题目解析****三、参考代码**PythonJavaC **四、时空复杂度**华为OD算法/大厂面试高频题算法练习冲刺…

webstorm配置项目Typescript编译环境

使用npm命令安装typeScript编译器 npm install typescript -g 安装好&#xff0c;在命令行可以查看编译器的版本 tsc --version 用Webstorm打开一个Typescript的项目。为TypeScript文件更改编译设置&#xff0c;File->Settings->toosl -> File Watchers->TypeScri…

【工具篇】华为VRP通用操作系统 —— 基础命令介绍

文章目录 视图切换命令命令报错误类型命令行快捷键 【工具篇】华为VRP通用操作系统 —— 基础知识 通过上一节的华为VRP通用操作系统介绍&#xff0c;掌握如何登入设备以及命令行架构。也通过eNSP虚拟器搭建拓扑成功登入华为VRP通用操作系统。 本文章介绍基础命令以及快捷键&am…

【数据结构】二叉树基本操作(孩子兄弟表示法 + Java详解 + 原码)

Hi~&#xff01;这里是奋斗的明志&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f331;&#x1f331;个人主页&#xff1a;奋斗的明志 &#x1f331;&#x1f331;所属专栏&#xff1a;数据结构 &#x1f4da;本系列文章为个人学…

OpenStack入门体验

一、云计算概述 1.1什么是云计算 云计算(cloud computing)是一种基于网络的超级计算模式,基于用户的不同需求&#xff0c;提供所需的资源&#xff0c;包括计算资源、存储资源、网络资源等。云计算服务运行在若干台高性能物理服务器之上&#xff0c;提供每秒 10万亿次的运算能力…

MSF回弹木马ubuntu测试

网站地址为192.168.104.128 web.php内容为&#xff1a; <?php eval($_POST[123]); ?>linux版本信息&#xff1a;20.04.1-Ubuntu nginx信息&#xff1a;nginx-1.21.6 php信息&#xff1a;PHP 7.3.33-19 php-fpm信息&#xff1a;/etc/php/7.3/fpm/php-fpm.conf 一、使用…

解决VisualVM下载插件失败(手动安装)

解决VisualVM下载插件失败 当前为jdk8自带的jvisualvm,出现以下情况,已经配置了对于java版本的url 点设置,再点编辑,对url进行修改 进入这里网址 检查url是否对应,复制到上面的url上面 例如: 我的jdk版本为: jdk-8u321-windows-x64 , 选131 - 351 再重新下载 还是不行, 可以…

嵌入式人工智能(38-基于树莓派4B的角速度和加速度传感器-MPU6050)

1、角速度传感器 角速度传感器是一种用于测量物体在空间中绕坐标轴旋转的速度的传感器。角速度是一个物体围绕某一轴旋转的速度大小&#xff0c;通常以角度/秒或弧度/秒的形式表示。 角速度传感器通常使用陀螺仪原理来测量角速度。陀螺仪是基于角动量守恒定律的物理原理&…

力扣高频SQL 50题(基础版)第三十八题

文章目录 力扣高频SQL 50题&#xff08;基础版&#xff09;第三十八题1484.按日期分组销售产品题目说明实现过程准备数据实现方式结果截图总结 力扣高频SQL 50题&#xff08;基础版&#xff09;第三十八题 1484.按日期分组销售产品 题目说明 表 Activities&#xff1a; ---…

类型推断技术及仓颉语言实践

史磊 仓颉语言类型推断技术专家 一、一种看待类型系统的方式 一门编程语言一定得包含类型系统吗&#xff1f; 这个问题今天看来可能显而易见&#xff0c;一个程序没有类型的话还能算是个完整、正确的程序吗&#xff1f;但是其实关于类型系统的作用&#xff0c;一直是存在两种…

PCB打板——usb扩展坞

采用一个typec模块&#xff0c;四个typea模块&#xff0c;以及保险丝&#xff0c;电源滤波部分&#xff0c;原理图如下 这里usb信号线为差分信号&#xff0c;要用差分导线&#xff08;长度相同&#xff0c;对称&#xff09;

RK3568笔记五十:SPI通信-回环测试

若该文为原创文章&#xff0c;转载请注明原文出处。 一、SPI引脚关系 其中SPI1的引脚关系如下表所示 SPI 引脚 功能 MOSI GPIO3_C1 主设备输出/从设备输入 MISO GPIO3_C2 主设备输入/从设备输出 CLOCK CPIO3_C3 时钟信号线 CS0 GPIO3_A1 片选信号线0 CS1 NC …

kettle从入门到精通 第八十二课 ETL之kettle kettle中的【阻塞数据直到步骤都完成】使用教程

1、在使用步骤【阻塞数据直到步骤都完成】&#xff08;英文为Block this step until steps finish&#xff09;之前&#xff0c;我们先来了解下什么是 Copy Nr&#xff1f; Copy Nr是指 “副本编号” 或 “拷贝编号”&#xff0c;也就是下图中的复制的记录行数&#xff0c;图中…

全网最强Nginx教程 | 万字长文爆肝Nginx(五)

Nginx实现服务器端集群搭建 Nginx与Tomcat部署 前面课程已经将Nginx的大部分内容进行了讲解&#xff0c;我们都知道了Nginx在高并发场景和处理静态资源是非常高性能的&#xff0c;但是在实际项目中除了静态资源还有就是后台业务代码模块&#xff0c;一般后台业务都会被部署在…

基于Spring boot + Vue的灾难救援系统

作者的B站地址&#xff1a;程序员云翼的个人空间-程序员云翼个人主页-哔哩哔哩视频 csdn地址&#xff1a;程序员云翼-CSDN博客 1.项目技术栈&#xff1a; 前后端分离的项目 后端&#xff1a;Springboot MybatisPlus 前端&#xff1a;Vue ElementUI 数据库&#xff1a; …