<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" //点击刷新按钮触发该事件
@sort-change="sortChange" // 监听排序事件，需要在排序那一列加上sortable: true
@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, //表格边框是否显示
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,//行内查看按钮
index: 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,
},
]Methods 事件名称
this.$refs.crud.rowAdd() 打开表单新增窗口
this.$refs.crud.rowEdit(row,index) 打开表单编辑窗口
this.$refs.crud.rowView(row,index) 打开表单查看窗口
this.$refs.crud.updateDic(prop,dic) 更新指定字典
this.$refs.crud.dicInit() 重新加载全部字典
this.$refs.crud.getPropRef(prop) 获取prop的ref对象
this.$refs.crud.validate(valid,done,msg) 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
this.$refs.crud.validateField(props<Array,String>) 对部分表单字段进行校验的方法
this.$refs.crud.resetFields() 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
this.$refs.crud.clearValidate(props<Array,String>) 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
this.$refs.crud.clearSelection() 用于多选表格，清空用户的选择
this.$refs.crud.toggleSelection(Array) 用于多选表格，传递数组进去，会勾选数组中的对象，如果已经勾选则会取消勾选
this.$refs.crud.toggleAllSelection() 用于多选表格，切换所有行的选中状态
this.$refs.crud.toggleRowExpansion(row, expanded) 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
this.$refs.crud.setCurrentRow(row) 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
this.$refs.crud.clearSort() 用于清空排序条件，数据会恢复成未排序的状态
this.$refs.crud.clearFilter(columnKey) 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件
this.$refs.crud.doLayout() 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法this.$refs.crud.rowAdd() 打开表单新增窗口
this.$refs.crud.refreshTable() 进行重新初始化渲染
this.$refs.crud.sort(prop: string, order: string) 手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。
this.$refs.crud.updateKeyChildren(key:string, data:array) 适用于 lazy Table, 需要设置 rowKey, 更新 key children
this.$refs.crud.handleLoadDic() 主动更新所有远程网络字典