博客

Avue是一款基于element ui的前端框架，适用于编写后台管理类项目，该组件封装极其严格，因为缺乏足够的文档资料，在使用学习过程中，有着各种不便。

Avue核心是

<avue-crud></avue-crue>

的标签，里面有:option=”option”属性指向了api/option.js文件同级的是index.js文件，放api。


<avue-crud></avue-crue>


    <avue-crud
      class="diy-table-d"
      :option="option"  //与option文件关联
      :data="data"   //表单需要渲染的数据
      ref="crud"		//ref链
      v-model="form"	//这个是可以form["名字"] = xx修改表单的值（没讲清楚）
      :page="page"		//大概是页数，没搞过
      @on-load="onLoad"		// 是封装好的方法，调用此方法更新页面
      :table-loading="tableLoading"  //大概加载动画
      @selection-change="selectionChange"   //当选择项发生变化时会触发该事件
      @search-change="searchChange"     //点击搜索后触发该事件(由于page分页信息和search搜索信息是sync修饰符，可以直接通过this.page和this.search拿到)
      @search-reset="searchReset"  //清空搜索回调方法
      @current-change="currentChange"  //分页页码改变时会触发
      @size-change="sizeChange" //pageSize改变时会触发
      @refresh-change="refresh"  //点击刷新按钮触发该事件(由于page分页信息和search搜索信息是sync修饰符，可以直接通过this.page和this.search拿到)
      :cell-style="cellStyle"    //函数会有一个参数，那个参数页面加载的时候获取的每一项
      @row-save="rowSave"  //新增数据后点击确定触发该事件
      @row-update="rowUpDate"     //编辑数据后确定触发该事件
    ></avue-crud>

export const option = {
  headerAlign: 'center',
  align: 'center',
  border: true,
  index: true,
  indexLabel: '序号',
  tip: false, //提示
  selection: true, //多选框
  searchShow: true, //首次加载是否显示搜索
  searchSize: "mini", //搜索框大小
  indexFixed: false, //序号列是否冻结
  size: 'mini', //控件大小
  menu: true, //是否显示操作栏
  menuWidth: 240, //操作菜单栏的宽度
  columnBtn: false, //表格右侧操作列显隐的按钮
  refreshBtn: false, //刷新按钮
  searchBtn: false, //搜索显隐按钮
  dialogWidth: '40%', //弹出表单的弹窗宽度
  labelWidth: 150, //标题名称宽度
  addBtnText: '保存',  //新增按钮文案
  cancelBtnTitle: '取消', //取消按钮文案
  editBtn: false, // 行内编辑按钮
  delBtn: false, //行内删除按钮
  addBtn: true, //添加按钮
  column: [

    {
      label: '押箱状态',
      prop: 'yxztState',
      // hide: true,     //是否在表格里隐藏（会在增加里显示）
      labelPosition: "right",
      search: false, //搜索 默认false
      searchslot: false,//搜索自定义
      addDisplay: false, //表单新增时是否可见
      editDisplay: false,//表单编辑时是否可见
      viewDisplay: false,//表单查看时是否可见
      span: 12, //栅列
      slot: true, //列自定义
      align: 'center',
      width: 150, //列宽度
    },