avue框架的Scoped Slot自定义汇总

太过爱你忘了你带给我的痛 2023-06-19 01:59 20阅读 0赞

Scoped Slot的用法在官网可以看到大概信息，但是不具体。案例有的话我慢慢添加  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]

## 1、自定义表格显示数据时列的内容 ##

单独写了案例。[添加链接描述][Link 1]

## 2、自定义列的表单中内容 ##

首先\\lsfw-ui\\src\\const\\crud\\admin\\sysxxfsjl.js文件中，要配置formslot:true  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]  
然后在对应的vue文件中\\src\\views\\admin\\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="htfjmcForm"属性即可(列表单的prop+Form(htfjmcForm))

![在这里插入图片描述][20191203175149351.png]

## 3、自定义列的表单中内容 ##

## 4、自定义暂无数据的卡槽 ##

## 5、自定义折叠板的内容 ##

首先\\lsfw-ui\\src\\const\\crud\\admin\\sysxxfsjl.js文件中，要配置expand: true  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]  
然后在对应的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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 3]

## 6、自定义菜单的操作按钮 ##

只要在对应的vue文件中\\src\\views\\admin\\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="menu"属性即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 4]

## 7、自定义表单操作按钮 ##

## 8、自定义表格头部左侧按钮 ##

只要在对应的vue文件中\\src\\views\\admin\\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="menuLeft"属性即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 5]

## 9、自定义表格头部右侧按钮 ##

## 10、自定义操作栏下拉菜单 ##

## 11、自定义搜索栏内容 ##

单独写了案例。[添加链接描述][Link 2]

## 12、自定义搜索栏菜单按钮 ##

单独写了案例。[添加链接描述][Link 2]

## 13、自定义搜索表单 ##

尤其是搜索用下拉表示的  
![在这里插入图片描述][20200312151920788.png]  
在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;
                  }
                })
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 6]  
写的时候会发现，这样修改后新增弹窗的下拉框有数据了，但是搜索下拉框并没有数据，所以对搜索自定义，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:[],
              }
    }

因为搜索自定义，所以搜索按钮事件和清空事件都要重新修改，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203170815153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/weixin_44770377/article/details/103370525
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191203174547190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[20191203175149351.png]: https://img-blog.csdnimg.cn/20191203175149351.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191203172349408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191203172523149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191203172016794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191203171726650.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[Link 2]: https://blog.csdn.net/weixin_44770377/article/details/103371439
[20200312151920788.png]: https://img-blog.csdnimg.cn/20200312151920788.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200312152057582.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200312152842204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70