<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"   //单击行运行的方法
           :row-style="rowStyle"         // function，回调column参数
           @search-change="searchChange"
           @search-reset="searchReset"  
           @selection-change="selectionChange"
           @current-change="currentChange" //点击页码会调用current-change方法回调当前页            
                                                    // 数，返回当前第几页
           @current-row-change="handleCurrentRowChange"//表格行被点击时的回调，回调函数的第一个参数是当前被点击行的数据           
           @size-change="sizeChange"      //点击每页多少条会调size-change方法回调
           @refresh-change="refreshChange" //点击刷新按钮触发该事件
           @on-load="onLoad"        //打开表格页面的方法，一般用来初始化，返回页面数据
           @tree-load="treeLoad"//表格行展开的懒加载回调，回调函数自带三个参数 row, treeNode,resolve  row：当前展开行的数据    treeNode：展开行节点数据    resolve：行懒加载的成功回调，在resolve里面将懒加载的数据传出去表格进行渲染

> 

option: {
          height:'auto',     //表格高度
          emptyText: "暂无数据哦~",//数据为空的提示
          calcHeight: 30,    //表格高度差（主要用于减去其他部分让表格高度自适应）
          searchShow: true,      //首次加载是否显示搜索
          searchSpan:6,      //搜索框长度  最大长度24
          searchMenuSpan:4,//搜索菜单栏的栅格宽度（整个搜索栏包括input框 按钮整个菜单栏的宽度）
          border: true,      //表格边框是否显示
          index: true,       //是否显示序号
          viewBtn: true,     //是否显示查看按钮
          selection: true,
          dialogClickModal: false,
          addBtn:false,      //是否显示添加按钮
          editBtn:false,     //是否显示编辑按钮
          delBtn:false,      //是否显示删除按钮
          excelBtn:false,    //表格导出按钮是否显示
          labelWidth:120,    //表单前面的标题长度
          refreshBtn: false, //表格上面小的 刷新按钮
          columnBtn: false,  //表格上面小的 列表按钮列动态显隐按钮
          searchBtn: false,  //表格上面小的 搜索按钮
          menu: true,        //是否显示操作栏
          defaultExpandAll:true, //树默认展开
          :table-loading = "tableLoading"//表格的状态（刷新、非刷新）
          align:'center',  // 表格列齐方式
          menuAlign:'center', // 菜单栏对齐方式
          saveBtn:false, // 新增表单的保存按钮;
         updateBtn:false, // 更新按钮
         emptyBtn:false//搜索清空按钮      
         expand: true//设置表格行可展开    注意：一般懒加载开启就不设置expand为true  expand：true会在表格第一列前面自己加一列放展开箭头类似于序号列那样  不加的话不会多产生一列 就在数据第一列有一个下拉箭头 样式稍微美观一点 所以一般不加 expand：true的设置
         lazy:true,//开启行展开懒加载
         rowKey:'code',// 表格行可展开的key 表格行展开必须设置rowKey
         accordion:true,//同级节点只展开一个 另外的收起
         menu: false,//表格操作列关闭、开启（查看 编辑...）
         menuFixed:'left',//表格操作列是否冻结（true/false/left-操作列在表格左边/right-操作列在表格右边）
         cancelBtn:false, // 行内查看取消按钮  
         viewBtn: true,//行内查看按钮
         indexLabel:'序号',//并将索引字段设置为“序号”
         indexFixed:false,//设置序号列是否冻结
         selection:true,//开启勾选功能  
         tip: false,//行可选情况下的选中提示
         reserveSelection:true,//可选情况下保留之前的勾选（来回翻页勾选不丢失）    
         menuWidth: 150,//表格操作列宽度
          column:[
             {
              label: "狩猎方法",  //列显示的名称
              prop: "way",  //列依赖的数据字段
              type: "input/password/textarea/checkbox/select",  //type为password可隐藏密码/type为textarea为文本编辑在新增、修改表单是可拉伸的文本编辑框不是简单的input框 checkbox:新增表单是复选框   select：搜索、新增表单会是下拉框，下拉选项结合下面的dic配置项实现
              addDisplay: false,   //新增时是否显示
              editDisplay: false,  //编辑时是否显示
              viewDisplay: true,   //详情时是否显示
              hide: true,          //隐藏列（在表格展示中隐藏 但是会在新增表单中显示 这一条可以解决表格不展示新增需要添加数据的，情况，解决掉往新增表单插入插槽的情况）
              display: true,       //在查看，新增，编辑页面是否显示
              span: 24,            //24一条数据占一行，8一行3条数据
              addDisabled: true,    //添加的时候不能修改
              editDisabled: true,   //编辑的时候不能修改
              sortable:true,        //排序方式切换，倒序、正序切换
              maxlength: 30,    //字数限制
              showWordLimit:true,  //显示字数限制
              defaultExpandAll:true, //树默认展开
              search:true,       //查询是否显示
              searchFilterable:true,   //select选择框匹配
              showColumn:false,    //列显隐中是否有
              searchValue: "搜索默认值",//搜索的默认值
              overHidden: true,//超出省略号显示
              filterable:true,  //在表单为select状态时 可键盘输入进行筛选选择项
              allowCreate:true, //结合上面的filterable配置可以使select选框为可输入状态 可以键入没有的选择项 并新键入的选择项可拱选择
              defaultFirstOption:true//在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用
                dicData:[{
                    label:"密码授权",
                    value:"password"
               }],//数据字典 type设置为checkbox或者select的时候结合dic配置来展示选框的值 这是静态的写法 匹配上value后当前选框的lable就是密码授权。同时在表格展示上，也会自动匹配数据字典的label进行展示，无需再使用插槽通过v-if判断该项的值再展示对应的内容  数据字典是一种常用的思想 
       // dicUrl: '/admin/dict/type/grant_types',//type设置为checkbox的时候除了上面静态的写法外，也可以获取服务端的动态数据字典
               multiple:true  //当type为select时，设置是否多选
               disabled:true  //禁用编辑
               rules: [//设置但当前列表单验证
                {required: true,message: "请输入姓名",trigger: "blur"},
                {min: 2,max:6,message: "请输入2-6个字符之间"},
               ]
              },
             {
              labelWidth: 0,
              label: '',
              prop: 'info',
              span: 24,
              addDisplay: false,
              hide: true,
              formslot: true,  //加一个插槽 子表可以放这里
            },
            {
              label: "当前完成进度",
              prop: "completePer",
              formatter: (row, value) => {    //拼接字符串的用法 formatter
                return value + '%'
              },
              addDisplay: false,
              editDisplay: true,
              formslot: true,
            },
          ]

// 表格展开懒加载回调

treeLoad(row, treeNode,resolve) {
     this.tjjcode = row.code
     //重新调用getStatData方法获取数据，在resolve里面将新数据传递出去供表格渲染子节点
     getStatData(this.deptId.id,this.tjjcode).then(res=> {
         let list = res.data.data;
         resolve(list);
     });
  },

//表格一些自定义按钮操作

// 导出自定义按钮
this.$refs.crud.rowExcel(); //通过refs拿到原生rowExcel方法 调用可弹出下载的弹框点击弹框的下载按钮即可实现导出

1、avue自带新增表单、修改表单、搜索变淡，已经为我们封装好了
2、会将column中配置了的字段在表单中展示出来
2、在使用的时候我们经常需对表单做一些自定义的东西
3、下面记录一下在工作中用到的一些方法 方便日后使用的时候直接查找
 
一、设置表单中某一字段输入框为一个下拉框
1、可以自己设置某一字段是下拉框、还是input框 还是其他形式
2、下面以column中的 状态（status）字段为例
3、自定义表单形式 需要使用到插槽 所以 必须要先在column中设置该字段的 fromslot:true 详见:表头column配置
4、除了使用插槽方式外 还有更加简便的方法 直接在column中配置 type:select 表单就是下拉框了
<avue-crud>
    //内部使用插槽 插入下拉框
    <template slot="statusForm">  //注意：slot名字必须要是prop的属性值+Form  即：statusForm
         <avue-select/>
    </template>
<avue-crud>
 
二、向表单中插入一个额外的输入框
1、此时的插槽名字为：menuForm
<template slot="menuForm">
   <el-form-item label="维修状态">
       <el-input placeholder="维修状态" v-model="search.value"/>
   </el-form-item>
</template>
{ "id": "1123598818738675223", "createUser": "1123598821738675201", "createDept": "1123598813738675201", "createTime": "2018-12-05 20:03:31", "updateUser": "1123598821738675201", "updateTime": "2018-12-28 11:10:51", "status": 1, "isDeleted": 0, "tenantId": "000000", "title": "测试公告", "category": 3, "releaseTime": "2018-12-31 20:03:31", "content": "222", "categoryName": "转发通知", "$index": 0, "$category": "3" }
 
三、向表单中插入一个自定义的按钮 例如文件上传
1、此时插槽的名字依然为:menuForm
<template slot="menuForm">
   <el-upload 
      style="display: inline-block; margin-left: 10px" 
      ref="upload" 
      :limit="1"
      action="/api/blade_basic/company/import-company"
      :data="{ isCovered: 1 }"
      :on-success="uploadSuccess"
      :on-progress="uploadprogress"
    >
      <el-button type="success" size="small" icon="el-icon-plus">导入数据</el-button>
    </el-upload>
</template>
 
四、向搜索表单插入内容
1、向搜索表单插入一个额外的（column中没有的字段）输入框
2、此时的插槽名字为：search
<template slot="search">
   <el-form-item label="维修状态">
       <el-input placeholder="维修状态" v-model="search.value"/>
   </el-form-item>
</template>