首页 > 其他分享 >avue的三种slot 插槽

avue的三种slot 插槽

时间:2023-11-20 19:45:54浏览次数:17  
标签:slot 插槽 mall && scope permissions avue row

avue的三种插槽

//菜单插槽
<template slot="menuLeft">
<el-button type="danger" @click="openDialogAdjustPrice" size="small" icon="el-icon-sort"
v-if="permissions['mall:goodssku:calculateMarketPrice']">一键调价</el-button>
<el-button type="success" @click="uploadPicSearch()" size="small" icon="el-icon-top"
v-if="permissions['mall:goodsspusearch:index']">上传图片检索</el-button>
</template>

//功能插槽
<template slot="menu" slot-scope="scope">
<el-button type="text" icon="el-icon-folder-checked" @click="openAuditConfirm(scope.row)"
v-if="scope.row.verifyStatus==='0' &&permissions['mall:goodsspu:verify']">审核</el-button>
<el-button type="text" icon="el-icon-top" @click="openShelfOnConfirm(scope.row)"
v-if="scope.row.shelf==='0'&&scope.row.verifyStatus==='1'&&permissions['mall:goodsspu:shelf']">上架</el-button>
<el-button type="text" icon="el-icon-bottom" @click="openShelfOffConfirm(scope.row)"
v-if="scope.row.shelf==='1'&&scope.row.verifyStatus==='1' &&permissions['mall:goodsspu:shelf']">下架</el-button>
</template>

//搜索插槽
<template v-if="isShowSupplier" slot="supplierIdSearch" slot-scope="scope">
<el-select v-model="paramsSearch.supplierId"
placeholder="选择或搜索供应商" filterable clearable remote reserve-keyword size="small"
@focus="getSupplierPage" :remote-method="getSupplierPage" :loading="false">
<el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</template>
<template slot="picUrlsSearch" slot-scope="scope">
<el-upload ref="upload" class="avatar-uploader" :headers="headers"
action="/mall/goodsspusearch/getSearchKey"
:limit="1" :before-upload="uploadBefore" :on-remove="uploadRemove" :on-success="uploadAfter">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>


标签:slot,插槽,mall,&&,scope,permissions,avue,row
From: https://www.cnblogs.com/huangtiing/p/17844683.html

相关文章

  • vue slot插槽
      插槽(slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽,可以把插槽认为是组件封装期间,为用户预留的内容的占位符,适用于父组件→子组件,$slots是组件插槽集,是组件所有默认插槽、具名插槽的集合,可以用来获取当前组件的插......
  • Vue插槽(Slot)的实现原理
    实现原理(简单文字)slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。slot又分三类,默认插槽,具名插槽和作用域插槽实现原理:当子组件vm......
  • 插槽(slot)用法汇总
    什么是插槽简单来说就是子组件中的提供给父组件使用的一个坑位,用表示,父组件可以在这个坑位中填充任何模板代码然后子组件中就会被替换成这些内容。比如一个最简单插槽例子<!--父组件--><template><div><Child>HelloJuejin</Child></div></template><scriptse......
  • 作用域插槽
    <template><div><MyTable:data="list"><template#default="obj"><button@click="del(obj.row.id)">删除</button></template></MyTable><MyTab......
  • Vue中的插槽
    插槽-默认插槽作用:让组件内部的一些结构支持自定义需求:要在页面中显示一个对话框,封装成一个组件,但是组件的内容部分,不是写死的,希望能使用时自定义。插槽的基本语法组件内需要定制的结构部分,改用<slot></slot>占位使用组件时,在组件中传入结构替换slot,例如<组件名>xxxxxx</组......
  • vue-test4 -----插槽
    <template><!--<Mainclass="cccc"/><component-a/>--><slot-demo><template#header="slotProps"><p>插槽标题-{{slotProps.msg}}</p></template><template......
  • 组件多插槽的使用
    <BtnHandle:eventBtn="eventBtn"><templatev-for="(_,slotKey,slotIndex)in$slots":key="slotIndex"#[slotKey]="slotData">......
  • 关于 element-ui 中的 default 插槽的使用
    关于element-ui中的default插槽的使用<el-cascader><templatev-slot:default="{node,data}"><div>{{data.label}}</div></template></el-cascader>......
  • 医院绩效考核系统全套源码,采用springboot、avue框架开发
    医院绩效考核系统全套源码(演示+自主版权+医院应用案例)医院绩效考核系统,建立以医院发展目标为导向,以医务人员劳动价值、工作量为评价基础,统筹效率、质量、成本的绩效管理和绩效工资分配体系。系统支持RBRVS(以资源为基础的相对价值比率)和DRGs(疾病诊断相关分类)。支持与HIS系统对接。......
  • Vue插槽
       插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot>表示,父组件可以在这个占位符中填充任何模板代码,如HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制插槽的应用......