AvueAvue
首页
  • 开发指南
  • Skill开发
  • 在线测试工具
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
产品
工作台
授权
联系
2.x文档
个人支付接口
首页
  • 开发指南
  • Skill开发
  • 在线测试工具
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
产品
工作台
授权
联系
2.x文档
个人支付接口
  • CRUD API
  • Object对象用法
  • 表格虚拟化
  • 分页
  • 搜索
  • 表头配置
  • 表格行配置项
  • 表格列配置项
  • 数据字典
  • 操作栏配置
  • 增删改查方法
  • 按钮文案和图标
  • 按钮自定义
  • 弹窗表单配置
  • 深层结构数据
  • 卡片模式
  • 统计合计
  • 导入导出
  • 表格树
  • 父子表
  • 行编辑
  • 权限控制
  • 动态行列合并
  • 空状态
  • 等待加载
  • 拖拽排序
  • 其它类型
  • 表格高级用法
  • 大表哥(宇宙最强表格)
  • CRUD模块封装
  • CRUD极简增删改查封装

Object对象用法

提示

3.2.15+

提示

之前的版本option中column是数组的格式,3.2.15+后支持对象格式,操作更加方便

效果预览可直接操作下方示例

option中的column可以配置成对象形式,用prop作为key

正在加载示例…
<template>
  <avue-crud :option="option"
             v-model="form"
             :data="data"></avue-crud>
</template>
<script setup>
import { ref } from 'vue'
const data = ref([{
  name: '姓名',
  sex: 14
}])
const option = ref({
  labelWidth: 120,
  column: {
    name: {
      label: '姓名',
    },
    sex: {
      label: '年龄',
    }
  }
})
const form = ref({})
option.value.column.name.label += '(name)';
</script>
最后更新:
贡献者: smallwei
Prev
CRUD API
Next
表格虚拟化