Arco Design 之Table表格

此篇文章为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-基础表格 图2-可编辑表格

此文章会持续更新 ~

相关推荐
LAOLONG-C7 分钟前
今日CSS学习浮动->定位
前端·css·css3
城南旧事14 分钟前
SSE (Server-Send Events) 服务端实时推送技术
前端
Mapmost19 分钟前
【数据可视化艺术·应用篇】三维管线分析如何重构城市"生命线"管理?
前端·数据可视化
palpitation971 小时前
在Flutter中使用Builder的正确方式:一场context的教育
前端
Eliauk__1 小时前
深入剖析 Vue 双向数据绑定机制 —— 从响应式原理到 v-model 实现全解析
前端·javascript·面试
代码小学僧1 小时前
Cursor 的系统级提示词被大佬逆向出来了!一起来看看优秀 prompt是怎么写的
前端·ai编程·cursor
MrsBaek1 小时前
前端笔记-Axios
前端·笔记
洋流1 小时前
什么?还没弄懂关键字this?一篇文章带你速通
前端·javascript
晴殇i1 小时前
for...in 循环的坑,别再用它遍历 JavaScript 数组了!
前端·javascript
littleplayer1 小时前
iOS 单元测试详细讲解-DeepSeek
前端