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-可编辑表格

此文章会持续更新 ~

相关推荐
_请输入用户名32 分钟前
EventEmitter 是广播,Tapable 是流水线:聊聊它们的本质区别
前端·设计模式
爱学习的茄子33 分钟前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
龙在天33 分钟前
我是前端,我来总结一下前端 配 Nginx 的一些案例
前端
Thetimezipsby36 分钟前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
掘金安东尼1 小时前
前端周刊430期(2025年9月1日–9月7日)
前端
BUG创建者1 小时前
uni 拍照上传拍视频上传以及相册
前端·javascript·音视频
就是帅我不改1 小时前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
JackJiang1 小时前
转转客服IM系统的WebSocket集群架构设计和部署方案
前端
codeGoogle1 小时前
大厂研发之谜:千亿投入砸出利润大缩水
前端·人工智能·后端
菲兹园长1 小时前
CSS(展示效果)
前端·javascript·css