Scoped Slot的用法在官网可以看到大概信息，但是不具体。案例有的话我慢慢添加
1、自定义表格显示数据时列的内容
单独写了案例。添加链接描述
2、自定义列的表单中内容
首先\lsfw-ui\src\const\crud\admin\sysxxfsjl.js文件中，要配置formslot:true
然后在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="htfjmcForm"属性即可(列表单的prop+Form(htfjmcForm))
<template slot-scope="scope" slot="htfjmcForm">
<el-upload
:headers="headers"
:show-file-list="true"
:on-success="handleAvatarSuccess"
accept=".doc,.docx,.pdf.xls,.xlsx,.wps"
action="/admin/sys-file/upload">
<el-button size="small" icon="el-icon-link" type="primary">上传合同</el-button>
<el-link type="primary" v-show="fileExist" target="_blank" :href="fileviewURL"><i class="el-icon-view el-icon--right"></i>查看合同</el-link>
</el-upload>
</template>
3、自定义列的表单中内容
4、自定义暂无数据的卡槽
5、自定义折叠板的内容
首先\lsfw-ui\src\const\crud\admin\sysxxfsjl.js文件中，要配置expand: true
然后在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="expand"属性即可
<template slot="expand" slot-scope="scope">
联系电话：{{scope.row.lxdh}} ,产品费用：{{scope.row.cpfy}} ,产品销售净额：{{scope.row.xsje}}
</template>
6、自定义菜单的操作按钮
只要在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="menu"属性即可
<template slot-scope="scope" slot="menu">
<el-button icon="el-icon-delete"
size="small" type="text"
v-show="isPermissions[2]"
@click.stop="rowDelete(scope.row,scope.index)">删除</el-button>
<el-button icon="el-icon-chat-line-square"
size="small" type="text"
v-show="isPermissions[2]"
:disabled="scope.row.sfyd==0?false:true"
@click.stop="markedRead(scope.row,scope.index)">标为已读</el-button>
<el-button icon="el-icon-star-off"
size="small" type="text"
v-show="isPermissions[2]"
:disabled="scope.row.sfsc==0?false:true"
@click.stop="collection(scope.row,scope.index)">收藏</el-button>
<el-button icon="el-icon-thumb"
size="small"
type="text"
v-show="isPermissions[1]"
@click.stop="forwardSend(scope.row,scope.index)">转发</el-button>
<el-button icon="el-icon-suitcase"
size="small"
type="text"
v-show="isPermissions[1]"
:disabled="scope.row.sfdb==0?false:true"
@click.stop="transferToDo(scope.row,scope.index)">转待办</el-button>
<el-button icon="el-icon-chat-dot-round"
size="small"
type="text"
v-show="isPermissions[1]"
@click.stop="backSend(scope.row,scope.index)">回复</el-button>
</template>
7、自定义表单操作按钮
8、自定义表格头部左侧按钮
只要在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="menuLeft"属性即可
<template slot-scope="scope" slot="menuLeft">
<el-button type="primary"
icon="el-icon-chat-line-square"
size="small"
v-show="isPermissions[0]"
plain
@click.stop="markedReads">标为已读</el-button>
<el-button type="primary"
icon="el-icon-star-off"
size="small"
v-show="isPermissions[0]"
plain
@click.stop="collections">我要收藏</el-button>
<el-button type="danger "
icon="el-icon-delete"
size="small"
v-show="isPermissions[2]"
plain
@click.stop="rowDel">删除</el-button>
<el-button type="warning"
icon="el-icon-download"
size="small"
v-show="isPermissions[5]"
plain
@click.stop="exportExcel">导出</el-button>
</template>
9、自定义表格头部右侧按钮
10、自定义操作栏下拉菜单
11、自定义搜索栏内容
单独写了案例。添加链接描述
12、自定义搜索栏菜单按钮
单独写了案例。添加链接描述
13、自定义搜索表单
尤其是搜索用下拉表示的
在js文件中配置type:“select”,dicUrl请求地址，props字段配置！则在页面进入时就会发出请求。但只识别到后台饭后的res.data.data。若后台返回的是res.data.data.records;则要在vue文件中对数据处理，处理如下：
created:function () {
//在页面创建时需处理内容，在此添加，比如给下拉框绑定change事件等
// 等级
getDicData({path:"/scgl/rfmemberlevel/djlist",data:[]}).then(response =>{
if (response.data.data){
this.$refs.crud.DIC.grade=response.data.data.records;
this.gradeList=response.data.data.records;
}
})
}
写的时候会发现，这样修改后新增弹窗的下拉框有数据了，但是搜索下拉框并没有数据，所以对搜索自定义，js文件设置search:true,searchslot:true,
vue文件设置卡槽如下：
<!--等级搜索自定义-->
<template slot-scope="scope" slot="gradeSearch">
<el-select v-model="gradeSearch">
<el-option
v-for="item in gradeList"
:key="item.id"
:label="item.label"
:value="item.id"/>
</el-select>
</template>
data() {
return {
gradeSearch:'',
gradeList:[],
}
}
因为搜索自定义，所以搜索按钮事件和清空事件都要重新修改，如下：
