Avue是一款基于Element-Ui再封装的一款ui框架，使用方便。但是自己在工作中经常记不住一些配置，虽然Avue官网上面都有这些配置说明，但是有时候自己还是会找很久才找到，为了方便自己今后查找使用，将一些常用的配置梳理在下面
1、表格配置项 option
2、表头column配置
// 表头配置
? ?column: [{
? ? ? ?label: '题库期数',//列显示的名称
? ? ? ?prop: 'pernumber',//列依赖的数据字段
? ? ? ?search: true,//开启当前行数据可搜索
? ? ? ?searchValue: "搜索默认值",//搜索的默认值
? ? ? ?addDisplay:false,//当前行数据在新增表单中是否可见
addDisabled:false,//当前行数据在新增表单中是否可编辑
? ? editDisplay:false,//当前行数据在编辑表单中是否可见
? ? ? ?editDisabled:true//当前行数据在编辑表单中是否可编辑
? ? ? ?
? ? ? ?overHidden: true,//超出省略号显示
? ? ? ?sortable: true,//开启表格排序
? ? ? ?hide: true,//隐藏列（在表格展示中隐藏 但是会在新增表单中显示 这一条可以解决表格不展示新增需要添加数据的，情况，解决掉往新增表单插入插槽的情况）
? ? ? ?type:"password / textarea/checkbox/select" ? //type为password可隐藏密码/type为textarea为文本编辑在新增、修改表单是可拉伸的文本编辑框不是简单的input框 checkbox:新增表单是复选框 ? select：搜索、新增表单会是下拉框，下拉选项结合下面的dic配置项实现
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个字符之间"},
]
? },
{
label: '状态',
prop: 'status',
formslot: true,//自定义表单开关项
type:select,//表单呈现效果为下拉框
}
]
3、使用插槽向表单（新增表单、修改表单、搜索表单）中插入内容
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>
三、向表单中插入一个自定义的按钮 例如文件上传
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>
