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

此文章会持续更新 ~

相关推荐
超人不会飛2 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦5 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想7 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z16 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982421 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴27 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干30 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗32 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder37 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder40 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github