话不多说 笔记直接分享!!
一、自定义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>
标签:index,自定义,crud,按钮,旧版本,avue,写法,row From: https://www.cnblogs.com/jinhaisheng/p/17621038.html