avue框架的Scoped Slot自定义汇总

最新推荐文章于 2024-03-26 11:09:50 发布

指标满载

最新推荐文章于 2024-03-26 11:09:50 发布

阅读量1.1w

点赞数 7

文章标签： avue 自定义 scoped slot slot-scope

本文链接：https://blog.youkuaiyun.com/weixin_44770377/article/details/103372028

版权

本文详细介绍了如何在avue框架中使用Scoped Slot进行各种自定义，包括表格列内容、表单、暂无数据展示、折叠板、菜单按钮等。通过具体的配置和模板设置，展示了自定义表格显示、表单、搜索栏等内容的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

在这里插入图片描述