首页 > 其他分享 >slot插槽灵活应变显示表单的顺序,多少

slot插槽灵活应变显示表单的顺序,多少

时间:2024-09-06 13:48:03浏览次数:10  
标签:slot headList name 插槽 单据 灵活应变 合同

<el-form ref="moreForm" :model="formInline" inline>             <el-row type="flex" class="flex-row" :gutter="0">               <slotvue :head-list="headList[32]">                 <template slot="单据日期">                   <el-form-item label="单据日期" style="margin-right:0x">                     <date-range-picker v-model="formInline.dateArea" style="width:100%" @change="changeDate" />                   </el-form-item>                 </template>                 <template slot="单据号">                   <el-form-item label="单据号" style="margin-right:0x">                     <el-input v-model="formInline.strreceiptno" placeholder="请输入" clear style="width:100%" />                   </el-form-item>                 </template>                 <template slot="合同编号">                   <el-form-item label="合同编号">                     <el-input v-model="formInline.strcontractcode" clearable placeholder="请输入" style="width:100%" />                   </el-form-item>                 </template>                 <template slot="合同名称">                   <el-form-item label="合同名称">                     <el-input v-model="formInline.strcontractname" clearable placeholder="请输入" style="width:100%" />                   </el-form-item>                 </template>                 <template slot="往来单位">                   <el-form-item label="往来单位">                     <contact-unit-picker v-model="formInline.lngcustomerid" placeholder="请选择往来单位" style="width:100%" />                   </el-form-item>                 </template>                 <template slot="合同类别">                   <el-form-item label="合同类别" style="margin-right:0x">                     <tree-select                       v-model="formInline.contracttypepath"                       :options="contractTypeTree"                       placeholder="请选择"                       filterable                       clearable                       :props="{                         label:'treedatacodeandname',                         value:'path',                         children:'childList'                       }"                       style="width:100%"                     />                   </el-form-item>                 </template>                 <template slot="状态">                   <el-form-item label="状态">                     <el-select v-model="formInline.bytstatus" placeholder="请选择" style="width: 100%;">                       <el-option                         v-for="item in statusList"                         :key="item.value"                         :label="item.label"                         :value="item.value"                       />                     </el-select>                   </el-form-item>                 </template>               </slotvue> </el-row> </el-form> headList: {         31: [           { name: '单据日期' },           { name: '单据号' },           { name: '合同编号' },           { name: '合同名称' },           { name: '往来单位' },           { name: '合同类别' },           { name: '状态' }         ],         32: [           { name: '单据日期' },           { name: '状态' },           { name: '单据号' },           { name: '合同编号' },           { name: '合同名称' },           { name: '往来单位' }         ]       } slotvue组件 <template>   <div class="dynamic">     <el-col v-for="(item,index) in headList" :key="index" :span="24">       <slot :name="item.name" />     </el-col>   </div> </template> <script> export default {   props: {     headList: {       type: Array,       default: () => []     }   },   data() {     return {
    }   } } </script>

标签:slot,headList,name,插槽,单据,灵活应变,合同
From: https://www.cnblogs.com/hellofangfang/p/18400077

相关文章

  • 前端宝典二十五:vue2高阶用法mixin、transition、slot
    本文主要探讨vue2中几个高阶的用法:mixin、transition、slot一、mixin在Vue中,mixin(混入)是一种用于在多个组件之间共享代码的机制。它允许你定义可重用的选项对象,并将其混入到不同的组件中。1、使用方法创建一个混入对象:constmyMixin={data(){return{......
  • 063、Vue3+TypeScript基础,作用域插槽的使用
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • 061、Vue3+TypeScript基础,插槽中增加图片和控制视频
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • 062、Vue3+TypeScript基础,插槽中使用具名插槽
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • Vue 插槽
    如果向组件标签中输入内容,会被忽略掉1、props接受父组件传递过来的数据2、插槽,接受父组件向子组件传递的html文本在组件中通过slot标签可以接收父组件传递过来的html文本,就是将slot标签添加到template标签中如下:现在组件中添加标签<sub-component:pmsg='msg'>......
  • 具名作用域插槽
    插槽中的单一数据绑定一种较为简单的场景,即插槽传递单一数据。这种情况下,插槽中的内容可以接受一个传入的数据,然后在组件中使用.使用了一个名为header的插槽,并通过message="hello"将一个字符串“hello”作为headerProps传递给插槽。这里的headerProps是一个对象,包含......
  • el-upload在定义file插槽时删除图片(包括隐藏上传框)
    1.上传框隐藏效果图(限制上传两张图片,上传两张图片后隐藏上传框) <template><div><el-form><el-uploadref="uploadPicture"action="#"list-type="picture-card"......
  • 动态组件,插槽,vue项目创建,vue项目目录结构,vue开发规范,es6语法
    Ⅰ动态组件【一】基本使用【1】不使用动态组件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>动态组件</title><scriptsrc="./js2/vue.js"></script></head><......
  • 034.Vue3入门,插槽Slot中同时显示主页面和插槽页面的内容
    1、App.vue代码:<template><div><h3>主页面</h3><Slot001v-slot="slotProps"><h4>{{msg}}==={{slotProps.msg}}</h4></Slot001></div></template><script>i......
  • 035.Vue3入门,使用具名插槽Slot中,同时显示主页面和多个插槽页面内容
    1、App.vue代码如下:<template><div><h3>主页面</h3><Slot001><template#s1="slotProps"><h4>{{msg}}==={{slotProps.msg1}}</h4></template><template#s2......