探索Avue：低代码前端框架的高效开发指南

在当今快节奏的软件开发环境中，效率和速度往往是决定项目成功与否的关键因素。Avue，一个基于Element-plus的低代码前端框架，以其独特的JSON配置方式，为开发者提供了一种快速生成页面的方法，极大地提升了开发效率。本文将深入探讨Avue框架的配置项，帮助开发者快速上手并充分利用这一强大的工具。

一、Avue-crud 配置项简介

Avue框架的核心在于其crud（创建、读取、更新、删除）配置项，这些配置项允许开发者通过JSON格式定义页面的布局和行为。通过这种方式，开发者可以避免编写大量的HTML和JavaScript代码，从而加快开发速度。

<avue-crud 
	  :option="option"                     //表格配置属性      
	  :table-loading="loading"             //表格等待框的控制，加载的时候转圈圈，设置true/false
	  :search.sync="search"                //搜索的变量(需要sync修饰符)
	  :visible.sync="changeInfo"           //是否显示，设置true/false
	  :data="data"                         //表格显示的数据
	  :page.sync="page"                    //表格分页配置选项(需要sync修饰符)
	  :permission="permissionList"         //权限控制
	  :before-open="beforeOpen"            //打开前的回调function(file,column)
	  v-model="form"                       //数据模型 用来存取页面值的 
	  ref="crud"                           //在普通的 DOM 元素上使用，引用指向的就是 DOM 元素
	  @cell-click="pageto"                 //表格点击运行方法 onclick方法定义
	  @row-update="rowUpdate"              //更新数据后确定触发该事件
	  @row-save="rowSave"                  //新增数据后点击确定触发该事件
	  @row-del="rowDel"                    //行数据删除时触发该事件
	  @row-click="handleRowClick"          //单击行运行的方法
	  @search-change="searchChange"        //点击搜索后触发该事件
	  @search-reset="searchReset"          //清空搜索回调方法
	  @selection-change="selectionChange"  //当选择项发生变化时会触发该事件
	  @current-change="currentChange"      //点击页码会调用current-change方法回调当前页数
	  @size-change="sizeChange"            //点击每页多少条会调size-change方法回调
	  @refresh-change="refreshChange"      //点击刷新按钮触发该事件
	  @on-load="onLoad"                    //打开表格页面的方法，一般用来初始化，返回页面数据
>  

二、crud之option解释

option配置项是Avue中定义页面行为的核心部分，它包括了数据源、分页、排序等关键属性。通过合理配置option，开发者可以控制数据的加载、显示和交互方式。

option: {
	  height:'auto',                              //表格高度
	  calcHeight: 30,                             //表格高度差
	  searchShow: true,                           //首次加载是否显示搜索
	  searchMenuSpan: 4,                          //搜索按钮长度
	  searchSpan:6,                               //搜索框长度  最大长度24
	  border: true,                               //表格边框是否显示
	  index: true,                                //是否显示序号
	  indexLabel:'序号',                          //并将索引字段设置为“序号”
	  viewBtn: true,                              //是否显示查看按钮
	  selection: true,                            //表格勾选列（即批量删除）
	  dialogClickModal: false,                    //是否可以通过点击modal关闭Dialog
	  addBtn:false,                               //是否显示添加按钮
	  editBtn:false,                              //是否显示编辑按钮
	  delBtn:false,                               //是否显示删除按钮
	  excelBtn:false,                             //表格导出按钮是否显示
	  labelWidth:120,                             //表单前面的标题长度
	  searchLabelWidth:80,                        //搜索项标题长度
	  refreshBtn: false,                          //表格上面小的 刷新按钮
	  columnBtn: false,                           //表格上面小的 列表按钮
	  searchBtn: false,                           //表格上面小的 搜索按钮
	  menu: true,                                 //是否显示操作栏
	  menuWidth:300,                              //表格操作列宽度
	  dialogWidth: '80%',                         //弹出表单的弹窗宽度
	  saveBtnText:'保存',                         //保存按钮文案
	  updateBtnText:'修改',                       //修改按钮文案
	  cancelBtnText:'取消',                       //取消按钮文案
	  addBtnText:'新增',                          //新增按钮文案
	  editBtnText:'编辑',                         //编辑按钮文案
	  delBtnText:'删除',                          //删除按钮文案
	  viewBtnText:'查看',                         //查看按钮文案
	  searchBtnText:'搜索',                       //搜索按钮文案
	  emptyBtnText:'清空',                        //清空按钮文案
	  dialogClickModal: false,                   //去掉'点击屏幕空白区就关闭弹框'属性
	  searchShowBtn: true,                       //栏目折叠显隐
	  header:false,                              //隐藏表格头部操作
	  refreshBtn: true,                          //刷新 
	  columnBtn: true,                           //操作列显隐
	  excelBtn: false,                           //导出Excel
	  printBtn: false,                           //表格打印导出
	  filterBtn: false,                          //筛选
}

三、crud之column解释

column配置项用于定义表格中的列。每个列可以包含标签（label）、属性（prop）、显示/隐藏（display）等属性。通过精细配置列，开发者可以控制表格的展示效果和数据的交互。

	column: [
	  {
	  label: "用户名",                        //表格的标题
	  prop: "username",                      //表格的key
	  width: "150",                          //表格的宽度
	  fixed: true,                           //是否冻结列
	  hide:true,                             //是否隐藏列
	  index:true,                            //是否显示表格序号  默认值：false
	  visdiplay:true,                        //表单不显示
	  overHidden: true,                      //超出用省略号显示
	  rules: [{                              //表单校验规则
	    required: true,                      //是否必填
	    message: "请输入用户名",              //提示信息 
	    trigger: "blur" 
	  }], 
	  addDisabled: true,                     //添加的时候禁止修改
	  editDisabled: true,                    //编辑的时候禁止修改
	  disabled:true,                         //禁止编辑
	  addDisplay: false,                     //新增时是否显示
	  editDisplay: false,                    //编辑时是否显示
	  viewDisplay: false,                    //查看时是否显示
	  display: false,                        //在查看，新增，编辑页面是否显示
	  span: 24,                              //span:24一条数据占一行，span:8一行3条数据
	  sortable:true,                         //排序方式切换，倒序、正序切换
	  search: true,                          //添加可搜索框
	  searchPlaceholder:"请选择合同来源",     //搜索框辅助文字
	  align:"center",                        //表单数据居中
	  row: true,                             //是否单独成行
	  searchOrder:1                          //搜索项位置排序，序号越大越靠前
	  searchLabel:'时间',
	  }
	]

四、crud之group解释

group配置项允许开发者将表单字段分组，使得页面布局更加清晰和有组织。每个分组可以有自己的标签（label）、属性（prop）和图标（icon），还可以控制是否显示箭头（arrow）等。

group: [
  {
    label: '基本信息',
    prop: 'jbxx',
    icon: 'el-icon-edit-outline',
    display: true,
    column: [
      {
        label: "主体类型",
        prop: "relType1",
        search: false,
        span: 8,
        editDisabled: true,
      },
      {
        label: "主体名称",
        prop: "name",
        span: 8,
        search: false,
        editDisabled: true,
      }
    ]
  },
  {
    label: '申请信息',
    prop: 'jbxx',
    span: 8,
    icon: 'el-icon-edit-outline',
    arrow: true,
    column: [
      {
        label: "申请类型",
        prop: "breedType1",
        span: 8,
        hide: true,
        editDisabled: true,
      }
    ]
  },
]

五、column类型写法

Avue支持多种类型的输入控件，包括基础输入框、下拉选择框、时间控件、计数选择器、单选框、上传图片框、多行文本域框、级联选择器、子表单、颜色控件、数组、超链接以及富文本编辑器等。每种控件都有其特定的配置方式，以满足不同的业务需求。

基础输入框

{
  "label": "广告标题",
  "prop": "title",
  "rules": [
    {
      "required": true,
      "message": "请输入广告标题",
      "trigger": "blur"
    }
  ]
}

下拉选择框

{
  "label": "设备负责人",
  "prop": "deviceUserId",
  "type": "select",
  "dicUrl": "/api/blade-system/dict/dictionary?code=supplierLvl",
  "props": {
    "label": "dictValue",
    "value": "dictKey"
  },
  "filterable": true,
  "rules": [
    {
      "required": true,
      "message": "请输入设备负责人",
      "trigger": "blur"
    }
  ]
}

时间控件框

{
  label: "年份",
  prop: "yearTime",
  rules: [{
    required: true,
    message: "请输入年份",
    trigger: "blur"
  }],
  type: "year",                 //类型为年份
  format: "yyyy",
  valueFormat: "yyyy",
  //限制能选择的时间范围
  pickerOptions: {
    // 禁用年份日期通过 disabledDate 设置
    disabledDate(time) {
      return time.getTime() < Date.now();
    },
  } 
},
{
  label: "开始时间",
  prop: "startTime", 
  type: "date",                  //类型为日期                                                              
  format: "yyyy-MM-dd",
  valueFormat: "yyyy-MM-dd",
  rules: [{
    required: true,
    message: "请选择开始日期",
    trigger: "blur"
  }],
},
{
  label: "开始时间",
  prop: "startTime", 
  type: "datetime",              //类型为日期+时间                                                 
  format: "yyyy-MM-dd HH:mm:ss",
  valueFormat: "yyyy-MM-dd HH:mm:ss",
  rules: [{
    required: true,
    message: "请选择开始时间",
    trigger: "blur"
  }],
},
{
  label: "时间范围",
  prop: "Time",
  type: "datetimerange",          //类型为时间范围
  searchRange: true,              //开启范围搜索                                                                                  
  format: "yyyy-MM-dd HH:mm:ss",
  valueFormat: "yyyy-MM-dd HH:mm:ss",
  rules: [{
    required: true,
    message: "请选择时间范围",
    trigger: "blur"
  }],
},

计数选择器

{
  label: "权重",
  prop: "sort", 
  type: 'number',                             //类型为数字
  minRows: 0,                                 //最小数字为0
  tip: '只能填写数字，数字越大广告排序越前',     //提示语
  rules: [{
    required: true,
    message: "请选择权重",
    trigger: "blur"
  }],
},

单选框

{
  label: "是否发布",
  prop: "isPublish", 
  type:'radio',      //类型为单选框
  dicData: [
    {
      label: "发布",
      value: 1
    },
    {
      label: "停用",
      value: 0
    },
  ],              
  rules: [{
    required: true,
    message: "请选择是否发布",
    trigger: "blur"
  }],
},

上传图片框

{
  label: "图片地址",
  prop: "photo",         
  type:'upload',
  drag: true,                                   //拖拽上传类型
  action: '/api/blade-resource/file/upload',    //上传路径
  //返回数据结构体配置
  propsHttp: {
    res: 'data',                                //返回结构体的层次
    url:'url',                                  //上传成功返回结构体的图片地址
    home:'http://tzhb.zhisuaninfo.com/pic/'     //图片的根路径地址
  },
dataType: 'string',                             //正常是数组格式，添加这个属性就变成了string格式传给接口
  data: { dir: 'paymentList'} ,                 //指定上传参数
  imgWidth:100,                                 //图片宽度
  imgHeight:100,                                //图片高度
  listType:'picture-img',                       //图片列表类型
  rules: [{
    required: true,
    message: "请上传图片",
    trigger: "blur"
  }],
},

多行文本框

{
  label: "供应项目",
  prop: "projects",
  minRows: 5,                //最小行/最小值
  type: "textarea",          //类型为多行文本域框
  maxlength:500,             //最大输入长度
},

联级选择器

{
  label: "归属系统",
  prop: "systemId",
  rules: [{
    required: true,
    message: "请输入归属系统",
    trigger: "blur"
  }],
  dicUrl: "/api/blade-property/devicesystemtype/allSystemTypeTree",//字典远程字典(填接口路径)
  type: 'cascader',             //类型为：级联选择器
  props: {
    label: "name",              //远程字典接口对应显示字段
    value: "id"                 //远程字典接口对应传值字段
  },
  filterable: true,             //添加filterable属性即可启用搜索功能
  checkStrictly: true,          //可以选择任意一级
  searchCheckStrictly:true,     //可以选择任意一级(在搜索框中起作用)
  search:true,
},

子表单

{
  label: "子表单内容",
  prop: "RoomTollInfo",
  type: "dynamic",             //类型为子表单(可新增删除)
  span: 24,
  labelPosition:'top',           //子表单标题
  children: {
    align: "center",
    column: [
    {
      label: "价格",
      prop: "price",
    },{
      label: "合同编号",
      prop: "contractNum",
      hide:true
    }]
  }
},

颜色控件 

{
  label: "主题颜色",
  prop: "color",
  type: 'color',
  value:"",             //默认值
  disabled:true,        //是否禁用
  colorFormat:"hex",    //颜色格式
  showAlpha:false,      //颜色格式
  predefine: [
    '#ff4500',
    '#ff8c00',
    '#ffd700'
  ],                    //预定义颜色
},

数组

{
  label:'数组',
  prop:'array',
  dataType:'number',
  propsHttp:{
    home:'http://demo.cssmoban.com',
  },
  type:'array'
}

超链接

{
  label:'超链接',
  prop:'href',
  type:'url'
},

引入第三方组件-富文本编辑器

main.js注册全局引入：

import avueUeditor from 'avue-plugin-ueditor';
Vue.component('avueUeditor', avueUeditor);

{
	label:'机构介绍',
	prop: "institutionIntroduce",
	component: 'AvueUeditor',
	options: {
		action: '/api/blade-resource/oss/endpoint/put-file',
		props: {
			res: "data",
			url: "link",
		}
	},
},

结语

Avue框架以其低代码的特性，为前端开发带来了革命性的改变。通过本文的介绍，我们可以看到，无论是简单的文本输入还是复杂的富文本编辑，Avue都能够通过简洁的JSON配置快速实现。希望本文能够帮助开发者更好地理解和使用Avue，从而提升开发效率，创造出更多优秀的前端应用。