前言
- Avue的v2版本是一个基于element-ui低代码前端框架
- Avue的v3是一个基于element-plus低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率
- Avue对于后台管理系统的开发极其便捷，就是配置不容易记住，熟练该框架配置来开发会好点，不然真不如直接用element来开发的好
Avue-vue2的官网地址
AvueUI框架Crud的常用
option: {
align:'center', // 表格列齐方式
addBtnText:'', // 表格新增按钮文案
addBtnIcon:'', // 表格新增按钮图标
addTitle:'', // 表格新增弹窗标题 edit（修改）、view（查看）
addBtn:true, // 表格行新增按钮 editBtn（表格行修改按钮）、delBtn（删除）、viewBtn（查看）、updateBtn（修改）、saveBtn（保存）、cancelBtn（取消）、searchBtn（查询）、emptyBtn（清空）
border: true, // 是否带有纵向边框
columnBtn:false, //列动态显隐按钮
cancelBtn:false, // 行编辑取消按钮
calcHeight: 30,
copyBtn:'', // 表格复制数据按钮
dialogClickModal: true, // 表格弹窗是否可以通过点击modal关闭
dialogDrag:'', // 表格弹窗是否可以拖拽
excelBtn: false, // 是否在左上角显示表格导出按钮
excelBtn:'', // 是否在左上角显示表格导出按钮
expandFixed: false, // 展开列是否冻结列
filterBtn:'', // 表格自定义过滤按钮
height: "auto", // 表格的高度，默认为自动高度。如果设置为auto，会自适应窗口高度，配合calcHeight参数去调节范围
index: true, // 是否有序号
indexLabel: "序号", // 序号列标题的名字
indexFixed: false, // 序号列是否冻结列
indexWidth:'', // 序号列宽度
labelWidth: 130, // 标签宽度
menuWidth: 200, // 表格的操作栏这一列的宽度
menuFixed: false, // 操作栏列冻结列
maxHeight:'', // 表格的最大高度
menu:'', // 是否有操作栏
menuTitle:'', // 操作栏标题
menuType:'text', // 操作栏按钮样式
menuAlign: "left", // 操作栏按钮的对齐方式
menuHeaderAlign:'', // 操作栏表头的对齐方式
printBtn:'', // 是否在左上角显示表格打印按钮
reserveSelection: true, //翻页多选
refreshBtn:'', // 表格刷新按钮
selection: true, // 表格前面是否有选择框
saveBtn:false, // 保存按钮
searchShow: true, // 表格搜索首次是否展示
searchShowBtn:'', // 表格搜索显隐按钮
searchMenuSpan: 24, // 顶部搜索 右侧的 搜索、清空、展开等按钮所占的比例24:24
searchMenuPosition: "right", // 表格搜索按钮位置
searchLabelWidth: 130, // 搜索项标题宽度
selectFixed: false,
searchIndex: 3, // 表格搜索半收缩个数
searchIcon: true, // 表格搜索半收缩按钮
selectionFixed: false, // 选择框列是否冻结列
size:'', // 组件尺寸
searchPlaceholder:'', // 搜索项辅助文字
searchSpan:'', // 搜索项框栅列
searchGutter:'', // 搜索项框间距
searchLabelPosition:'', // 搜索项标题位置
tip: true,
title:'表格的标题',
'table-loading':'', // 表格等待框的控制
updateBtn:false, // 更新按钮
viewBtn: true, // 是否在右上角显示表格查看按钮
// 表格列配置
column:[ // 表格列配置
{
addBtn: true, //表格右侧操作列的添加按钮
align: “center”, //表格列对其方式left/center/right，覆盖table的align
addDisabled:'', // 表单新增时项是否禁止，edit（编辑）、view（查看）
addDisplay:'', // 表单新增时项是否显示，edit（编辑）、view（查看）
addDisabled:false, //表单编辑时是否禁止
addDisplay:false, //表单编辑是否可见
border: true, //是否显示表格边框
calcHeight: “auto”, //表格高度差（主要用于减去其他部分让表格高度自适应）
clearable:true, //表单清空
columnBtn: true, //列显隐按钮
display:'', // 弹出表单是否显示
disabled: true, // 弹出表单是否禁止
delBtn: true, //表格右侧操作列的删除按钮
dicMethod: '', //传入字典的请求方式
dicQuery: '', //传入字典的请求参数Object
dicUrl: "/api/blade-system/dict/dictionary?code=flag" //字典的网络请求接口（例如配置/xxx/xx/{{key}},这样的格式，在column中dicData自动匹配prop字段名）
// 下拉项字典枚举，静态的，前端写死的数据
dicData: [
{
label: "启用保险",
value: "启用保险",
},
{
label: "停用保险",
value: "停用保险",
},
],
// 下拉项字典枚举，调用接口获取的
dataType: "string", // 下拉项数据的类型
defaultSort:表格的排序字段{prop:‘date’,order:‘descending/ascending’}prop默认排序字段，order排序方式
display: false, // 表格的查看、编辑、详情按钮等等，打开的弹框中是否显示某一个搜索项的数据
expand: false, //是否展开折叠行
editDisabled:false, //表单编辑时项是否禁止
editDisplay:false, //表单编辑项是否可见
editBtn: true, //表格对应行右侧的编辑按钮
fixed:'', // 列固定
formatter:'', // 格式化列内容，(row, value, row, column)
filters:'', // 数据过滤的选项
format:"yyyy年MM月dd日 HH时mm分ss秒", //搜索项显示值时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date
formslot:false, //表单自定义
fixed:true, //冻结列
formWidth:“auto”, //表单宽度
formHeight:“auto”, //表单行高度
headerAlign:'', // 表头对齐方式
height: “auto”, //表格高度
hide:true, //隐藏列 表格起作用
index: false, //是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）
indexLabel: “#”, //序号的标题
label:“租户ID”, //列名称
minWidth:'120', // 对应列的最小宽度
maxHeight: “auto”, //表格最大高度
menu: true, //是否显示操作菜单栏
menuWidth: 240, //表格列最小宽度
menuAlign: “left”, //菜单栏对齐方式left/center/right
maxRows:4, //最大行（当type为textarea）
minRows:2, //最小行（当type为textarea）
multiple:false, //多选（当type为select/tree时）
overHidden: true, // 表格数据超出，当内容过长被隐藏时显示 tooltip
placeholder:“请输入租户ID”, //控件提示输入语句
precision:2, //数字框输入精度（当type为number时）
prop: "money", // 搜索项中输入框对应的字段值
props: { // 列标题的内容属性名称，下拉框会用到，和 ttype:'select'一块使用
label: "dictValue",
value: "dictKey",
},
resizable:'', // 对应列是否可以通过拖动改变宽度（需要在option中border属性为真）
refreshBtn: true, //刷新按钮
row: true, // 单独成一行，配合span一起使用
表单字段校验规则,参考ele表单规则配置Object，rules不生效就换成searchRules
rules: [
{
required: true,
message: "请选择是否申请理赔",
trigger: "blur",
},
],
sortable:'', // 对应列是否可以排序，监听 sort-change 回调，true, false, 'custom'
search:true, //是否支持搜索
searchValue:'', // 搜索项初始化值
searchPlaceholder:'', // 搜索项辅助文字
searchSpan:'', // 搜索项框栅列
searchOrder:'', // 搜索项位置排序，序号越大越靠前
searchLabelWidth:'', // 搜索项标题宽度
searchClearable:'', // 搜索项清除
searchMultiple:'', // 搜索项是否多选
searchTags:'', // 搜索项将选中值按文字的形式展示
searchClearable:'', // 搜索项清除
searchClearable:'', // 搜索项清除
searchClearable:'', // 搜索项清除
stripe: true, //是否显示表格的斑马条纹
showHeader: true, //是否显示表格的表头
searchSize: “small”, //搜索控件的大小small/mini
searchBtn: true, //搜索显隐按钮（当column中有搜索的属性，或则searchslot为true时自定义搜索启动起作用）
sortable:false, //排序
span:12, //表单栅列
size:“medium”, //表单大小medium/small/mini
slot:false, //列自定义 支持自定义列
//搜索项的校验规则，searchRules不生效就换成rules
searchRules: [
{
max: 50,
message: "最多输入50个字符",
},
],
type: "select", // type类型为:input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree
valueFormat:"yyyy-MM-dd HH:mm:ss", //真实值的时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates)
width:'', // 对应表格列的宽度
},
],
options对象中的：
addBtn:true // 表格行右侧操作列是都显示新增按钮，显示的是Avue默认自带的
editBtn:true // 表格行右侧操作列是都显示修改按钮，显示的是Avue默认自带的
delBtn:true // 表格行右侧操作列是都显示删除按钮，显示的是Avue默认自带的
viewBtn:true // 表格行右侧操作列是都显示查看按钮，显示的是Avue默认自带的
updateBtn:true // 表格行右侧操作列是都显示更新按钮，显示的是Avue默认自带的
saveBtn:true // 表格行右侧操作列是都显示保存按钮，显示的是Avue默认自带的
cancelBtn:true // 表格行右侧操作列是都显示取消按钮，显示的是Avue默认自带的
searchBtn:true // 表格行右侧操作列是都显示查询按钮，显示的是Avue默认自带的
emptyBtn:true // 表格行右侧操作列是都显示清空按钮，显示的是Avue默认自带的
column数组中，某一个对象内的
format:"yyyy年MM月dd日 HH时mm分ss秒", // 搜索项显示值时间格式
当type的值为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date
有效
column数组中，某一个对象内的
type: "select",
当type类型为
input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree
有效
column数组中，某一个对象内的
valueFormat:"yyyy-MM-dd HH:mm:ss",//真实值的时间格式
当type为
date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates
有效
AvueUI框架Crud下拉框数据是从接口返回的，但是接口返回的数据格式和AvueUI框架规定的结构不一致，需要手动处理
data() {
return {
option: {
column:[
{
placeholder: " ",
label: "label产品",
prop: "insureProductId",
// disabled: true, // 弹出表单是否禁止
overHidden: true,
search: true, // 是否为搜索项
type: "select", // 类型是下拉框
dicData: [], // 下拉框的初始值，在mounted方法中赋值
},
]
}
}
}，
mounted(){
// 获取xxx下拉框数据
let params = {current:1,size:100,}
// 调用接口获取下拉框数据
getXxxDropBoxData(params).then((res) => {
const { code, data = [] } = res.data;
if (code === 200) {
// 整合数据，变成Avue框架，需要的下拉框的数据结构
// xxxId 是表格列的字段
let column = this.findObject(this.option.column,'xxxId');
// 为下拉框赋值
column.dicData = data.records.map(item => {
const { id, productName } = item;
return {
// ...item,
label: productName,
value: id,
}
})
}
})
},
AvueUI框架Crud下拉框数据是从接口返回的
{
placeholder: " ",
label: "label类型",
prop: "labelType",
disabled: true, // 弹出表单是否禁止
overHidden: true,
search: true, // 是否为搜索项
type: "select", // 类型是下拉框
dicUrl: "/api/xxx/xxx/xxx?code=string_type",
props: {
label: "labelValue",
value: "labeKey",
},
dataType: "number", // 下拉框数据类型，给接口传参时候，接口需要的类型
},
AvueUI框架Crud下拉框数据是前端写死的
{
placeholder: " ",
label: "label状态",
prop: "status",
overHidden: true,
search: true, // 是否为搜索项
type: "select", // 下拉框
// minWidth: '120', // 表格列的最小宽度
dicData: [
{
label: "label保险11",
value: "label保险11",
},
{
label: "label保险22",
value: "label保险22",
},
],
// rules: [
// {
// required: true,
// message: "请选择是否xxx",
// trigger: "blur",
// },
// ],
// searchRules: [
// {
// max: 50,
// message: "最多输入50个字符",
// },
// ],
dataType: "string", // 下拉框数据类型，给接口传参时候，接口需要的类型
},
avue 时间选择器限制时间范围
<avue-form v-model="form" :option="option"></avue-form>
<script>
export default {
data() {
return {
form:{},
option:{
column: [{
label: "禁止日期",
prop: "date",
type: "date",
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now();
},
}
}]
},
};
}
}
</script>
crud的group
group: [
{
label: 'label信息',
prop: 'jbxx',
icon: 'el-icon-edit-outline',
display: true,
column: [
{
label: "label类型",
prop: "relType1",
search: false,
span: 8,
editDisabled: true,
},
{
label: "label名称",
prop: "name",
span: 8,
search: false,
editDisabled: true,
}
]
},
{
label: 'label信息',
prop: 'jbxx',
span: 8,
icon: 'el-icon-edit-outline',
arrow: true,
column: [
{
label: "label类型",
prop: "breedType1",
span: 8,
hide: true,
editDisabled: true,
}
]
},
]
crudde column类型写法 input框、时间选择器、上传图片等等
1.基础输入框
{
label: "label标题",
prop: "title",
rules: [{
required: true,
message: "请输入label标题",
trigger: "blur"
}],
},
2.下拉选择框
{
label: "label负责人",
prop: "labelId",
type: "select", //类型为下拉选择框
dicUrl: "/api/xxx/xxx/xxx?code=xxxLv", //获取数据接口地址
props: {
label: "labelValue",
value: "labelKey"
},
searchClearable:false,//可清空的输入框,默认为true
dataType: "number", //数据类型用于数组和字符串之间的转化,默认string
filterable: true, //添加filterable属性即可启用搜索功能
rules: [{
required: true,
message: "请输入label负责人",
trigger: "blur"
}],
},
3.时间控件框
//年份类型：
{
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"
}],
},
4.计数选择器
{
label: "权重",
prop: "sort",
type: 'number', //类型为数字
minRows: 0,//最小数字为0
tip: '只能填写数字，数字越大广告排序越前', //提示语
rules: [{
required: true,
message: "请选择权重",
trigger: "blur"
}],
},
5.单选框
{
label: "是否发布",
prop: "isPublish",
type:'radio', //类型为单选框
dicData: [
{
label: "发布",
value: 1
},
{
label: "停用",
value: 0
},
],
rules: [{
required: true,
message: "请选择是否发布",
trigger: "blur"
}],
},
6.上传图片框
{
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"
}],
},
7.多行文本域框
{
label: "label项目",
prop: "projects",
minRows: 5, //最小行/最小值
type: "textarea", //类型为多行文本域框
maxlength:500, //最大输入长度
},
8.级联选择器
{
label: "label系统",
prop: "systemId",
rules: [{
required: true,
message: "请输入label系统",
trigger: "blur"
}],
dicUrl: "/api/xxx/xxx/xxxTree", //字典远程字典(填接口路径)
type: 'cascader', //类型为：级联选择器
props: {
label: "name", //远程字典接口对应显示字段
value: "id" //远程字典接口对应传值字段
},
filterable: true, //添加filterable属性即可启用搜索功能
checkStrictly: true, //可以选择任意一级
searchCheckStrictly:true, //可以选择任意一级(在搜索框中起作用)
search:true,
},
9.子表单
{
label: "子表单内容",
prop: "labelInfo",
type: "labelmic", //类型为子表单(可新增删除)
span: 24,
labelPosition:'top', //子表单标题
children: {
align: "center",
column: [
{
label: "label价格",
prop: "labelprice",
},{
label: "label编号",
prop: "labelNum",
hide:true
}]
}
},
10.颜色控件
{
label: "主题颜色",
prop: "color",
type: 'color',
value:"", //默认值
disabled:true, //是否禁用
colorFormat:"hex", //颜色格式
showAlpha:false, //颜色格式
predefine: [
'#ff4500',
'#ff8c00',
'#ffd700'
], //预定义颜色
},
11.数组
{
label:'数组',
prop:'array',
dataType:'number',
propsHttp:{
home:'http://demo.cssmoban.com',
},
type:'array'
}
12.超链接
{
label:'超链接',
prop:'href',
type:'url'
},
13.引入三方组件-富文本编辑器
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组件自定义按钮/标题/内容/搜索栏
一、自定义crud搜索栏组件
<template slot-scope="scope" slot="provinceCodeSearch">
<avue-select
v-model="objFrom.provinceCode" //这是存放省份的code
placeholder="请选择省市"
:dic="ProvinceList" //存放省份的下拉选择项
></avue-select>
</template>
column: [
{
showColumn: false,
label: "省份",
prop: "provinceCode",
type: "select",
search: true, //显示到search栏
searchslot: true, //使用插槽
},
]
二、自定义crud列表头部按钮
**旧版本写法：**
<template slot="menuLeft">
<el-button size="small" type="primary" icon="el-icon-edit">添加</el-button>
</template>
**新版本写法：**
<template #menu-left="{}">
<el-button size="small" type="primary" icon="el-icon-edit">添加</el-button>
</template>
三、自定义crud操作栏按钮
旧版本写法：
<template slot-scope="scope" slot="menu">
<el-button type="text" icon="el-icon-view" size="small" @click.stop="handleView(scope.row,scope.index)">查看</el-button>
<el-button type="text" icon="el-icon-edit" size="small" @click.stop="handleEdit(scope.row,scope.index)">编辑</el-button>
<el-button type="text" icon="el-icon-delete" size="small" @click.stop="handleDel(scope.row,scope.index)">删除</el-button>
</template>
新版本写法：
<template #menu="{row,index,size}">
<el-button type="text" icon="el-icon-view" size="small" @click.stop="handleView(row,index)">查看</el-button>
<el-button type="text" icon="el-icon-edit" size="small" @click.stop="handleEdit(row,index)">编辑</el-button>
<el-button type="text" icon="el-icon-delete" size="small" @click.stop="handleDel(row,index)">删除</el-button>
</template>
// 调出查看方法
handleView (row, index) {
this.$refs.crud.rowView(row, index);
},
// 调出编辑方法
handleEdit (row, index) {
this.$refs.crud.rowEdit(row, index);
},
// 调出删除方法
handleDel (row, index) {
this.$refs.crud.rowDel(row, index);
},
四、自定义crud列表显示字段值和样式
旧版本写法：
<template slot-scope="{row}" slot="pointId">
<el-tag>{{row.pointIdName}}</el-tag>
</template>
新版本写法：
<template #pointId="scope">
<el-tag>{{row.pointIdName}}</el-tag>
</template>
column: [
{
label: "所属区域",
prop: "pointId",
slot: true, //插槽开启
},
]
五、自定义form表单标题
旧版本写法：
<template slot-scope="{}" slot="businessRegisterMaterialLabel">
<span>材料 </span>
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content" style="max-width:500px;">第一行文字提示<br/>第二行文字提示</div>
<i class="el-icon-warning"></i>
</el-tooltip>
</template>
新版本写法：
<template #name-label="{}">
<span>材料 </span>
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content" style="max-width:500px;">第一行文字提示<br/>第二行文字提示</div>
<i class="el-icon-warning"></i>
</el-tooltip>
</template>
column: [
{
label: "材料",
prop: "businessRegisterMaterial",
type: "select",
labelslot:true, //使用插槽
},
]
六、自定义form表单内容
旧版本写法：
<template slot="postIdsForm" slot-scope="scope">
<el-cascader
v-model="form.postIds"
:options="postIdsOptions"
:props="props"
collapse-tags
collapse-tags-tooltip
clearable
style="width: 100%;"
/>
</template>
新版本写法：
<template #postIds-form="{row}">
<el-cascader
v-model="form.postIds"
:options="postIdsOptions"
:props="props"
collapse-tags
collapse-tags-tooltip
clearable
style="width: 100%;"
/>
</template>
column: [
{
label: "身份证",
prop: "postIds",
type: "select",
formslot:true, //使用插槽
},
]
七、自定义form表单弹窗内底部按钮
旧版本写法：
<template slot="menuForm">
<el-button size="small" icon="el-icon-plus">签约缴费</el-button>
</template>
新版本写法：
<template #menu-form="{}">
<el-button size="small" icon="el-icon-plus">签约缴费</el-button>
</template>
AvueUI框架Crud下自定义内容
<avue-crud :data="data" :option="option" ref="crud">
<!-- 左边插槽 -->
<template slot-scope="scope" slot="menuLeft">
<el-button type="danger" @click="$refs.crud.rowAdd()">新增</el-button>
</template>
<!-- 右边插槽 -->
<template slot-scope="scope" slot="menuRight">
<el-button type="danger" @click=() => {}">刷新</el-button>
</template>
<!-- 自定义行内操作栏插槽 -->
<template slot-scope="{row,index}" slot="menu">
<el-button @click="$refs.crud.rowEdit(row,index)">编辑</el-button>
<el-button @click="$refs.crud.rowDel(row,index)">删除</el-button>
</template>
<!-- 自定义弹窗内按钮插槽 -->
<template slot-scope="{row,index,type}" slot="menuForm">
<el-button v-if="type=='add'" @click="$refs.crud.rowSave()">自定义新增</el-button>
<el-button v-if="type=='edit'" @click="$refs.crud.rowUpdate()>自定义修改</el-button>
<el-button @click="$refs.crud.closeDialog()">取消</el-button>
</template>
<!-- 自定义表单插槽，slot="propForm" -->
<template slot-scope="{type,disabled}" slot="nameForm"> // column: [{prop:'name',formslot:true}]
<el-tag v-if="type=='add'">新增</el-tag>
<el-tag v-else-if="type=='edit'">修改</el-tag>
<el-tag v-else-if="type=='view'">查看</el-tag>
<el-tag>{{user.name?user.name:'暂时没有内容'}}</el-tag>
<el-input :disabled="disabled" v-model="user.name"></el-input>
</template>
<!-- 自定义表单错误提示插槽，slot="propError" -->
<template slot-scope="{error}" slot="nameError"> // column: [{prop:'name',labelslot:true}]
<p style="color:green">自定义提示{{error}}</p>
</template>
<!-- 自定义表单标题，slot="propLabel" -->
<template slot-scope="scope" slot="nameLabel"> // column: [{prop:'name',errorslot:true}]
<span>姓名 </span>
<el-tooltip class="item" effect="dark" content="文字提示" placement="top-start">
<i class="el-icon-warning"></i>
</el-tooltip>
</template>
<!-- 向搜索表单插入一个额外的（column中没有的字段）输入框 -->
<template slot="search">
<el-form-item label="状态">
<el-input placeholder="状态" v-model="search.value"/>
</el-form-item>
</template>
<!-- 向表单中插入一个额外的输入框 -->
<template slot="menuForm">
<el-form-item label="维修">
<el-input placeholder="维修" v-model="search.value"/>
</el-form-item>
</template>
</avue-crud>
