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>工商注册材料&nbsp;&nbsp;</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>工商注册材料&nbsp;&nbsp;</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>