SoFunction
Updated on 2025-04-07

vue dynamic configuration template 'component is' code

vue dynamic configuration template 'component is' code

Updated: July 4, 2019 10:56:43 Author: mubail
This article mainly introduces the vue dynamic configuration template 'component is' code. The example code is introduced in this article in detail, which has certain reference value for everyone's learning or work. Friends who need it can refer to it.

The implementation code is as follows

<template>
 <div v-if=''>
   <div v-for="(item,ix) in " :key="ix">
    <component :is="" v-if='item'
     :objectVlue="objectVlue"
     :object="item">
    </component>
   </div>
 </div>
</template>
<script>
export default {
 data() {
  return {
  };
 },
 props: {
  objectVlue:Object,
  object:Object,
 },
 created() {
  var itemType = require(`../units/`).default||{};//1.0
  (item=>{
   if(){
     = require(`@/scene/${this.$}/config/${}.js`);//2.0
   }   
  })

  (item=>{//Dynamic display of current components   if(itemType[])
   (
    itemType[].componentName,
    () => import(`@/components/info-collection/moudel/${itemType[].fileName}`)
   )
  })
 }
};
</script>
//1.0==================================================================================export default {
 tablePartMerge: {//Table merge template xtype   componentName: "tablePartMerge",//Component Name   fileName: "table-partInfo-merge"//The path of the file },
 tablePartInfo: {
   componentName: "tablePartInfo",
   fileName: "table-partInfo"
 },
 ueditorUnit: {
   componentName: "ueditorUnit",
   fileName: "unit-ueditor"
 },
 filesUnit: {
   componentName: "filesUnit",
   fileName: "unit-files"
 },
 approves: {  // Text information (approval record)   componentName: "approves",
   fileName: "approves-unit"
 },
 requiredDate:{ // Required completion date  componentName: "requiredDate",
  fileName: "required-date"
 },
}
//2.0======  =========
 = {
 "columns":[{
  "id": "partNumber",
  "disabled": false,
  "name":"Material encoding",
  "placeholder": "",
  "required": true,
  "selectDetail": [],
  "show": false,
  "span": 24,
  "width":"150",
  "xtype": "select"//Tables used in the component }]
}

//================= object passed from the parent ================================================ = [
  {
    title: 'Body Information',
    name: '1',
    id:"",
    child:[
      {
        id:'partInfoData',//id
        show:'true',// Whether to display        fileName:'tablePartInfo',//File path name        xtype:'tablePartMerge'//Table module      },
      {
        id:'mainAttachements',//Text Editor        show:'true',
        fileName:'',
        xtype:'filesUnit'
      },
      {
        id:'vivo_RequestCompletionTime',//Time selection module        show:'true',
        fileName:'',
        xtype:'requiredDate'
      },
      {
        id:'approves',
        show:'true',
        fileName:'approval',
        xtype:'approves'
      }
    ]
  }
];

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.

  • vue
  • dynamic
  • Configuration
  • template
  • component
  • is

Related Articles

  • How to get data list display

    This article mainly introduces in detail how Vue gets data list display. The sample code in the article is introduced in detail and has a certain reference value. Interested friends can refer to it.
    2019-12-12

  • Records of pitfalls struck by vuejs docking backend

    This article mainly introduces the pit records that have been stepped on by the Vuejs docking backend, which is of great reference value. I hope it will be helpful to everyone. If there are any errors or no complete considerations, I hope you will be very encouraged.
    2023-12-12

  • Solve the problem of using v-if or v-bind:class in v-for

    Today, the editor will share with you an article to solve the problem of using v-if or v-bind:class in v-for. It has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
    2018-09-09

  • How to solve the problem of width reduction when multiple tables in element-ui

    This article mainly introduces how to solve the problem of width reduction in multiple tables in element-ui when switching tabs. It has good reference value. I hope it will be helpful to everyone. If there are any errors or no complete considerations, I hope you will be very encouraged.
    2023-10-10

  • Method for implementing data tree structure with Element-UI control Tree

    This article mainly introduces the implementation of the data tree structure of the Element-UI control Tree. This issue introduces the functions of adding and modifying, which are relatively simple. It can be implemented through the $prompt pop-up control of element-ui. Friends who need it can refer to it.
    2024-01-01

  • Detailed explanation of the difference between Vue3 responsive solution and ref reactive

    As we all know, ref and reactive are used as reactive data. The following article mainly introduces relevant information about the differences between Vue3 reactive scheme and ref reactive. The article introduces the example code in detail. Friends who need it can refer to it.
    2022-12-12

  • How to implement Vue page jump animation effect

    It took Baidu a long time to jump to another page in Vue, and even search on Google, there was no way to go. In the end, I found an expert to personally guide me. Therefore, the following article mainly introduces the implementation method of Vue page jump animation effect. Friends who need it can refer to it.
    2018-09-09

  • vue2.0 axios cross-domain and rendering problem solution

    Below, the editor will share with you a cross-domain and rendering problem solution for vue2.0 axios, which has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
    2018-03-03

  • Example code for element-ui drop-down menu component Dropdown

    This article mainly introduces the element-ui drop-down menu component Dropdown. This article introduces you in detail one of the biggest pitfalls I encountered. By combining the sample code, I will introduce it to you in a very detailed way. Friends who need it can refer to it.
    2022-08-08

  • Example code for making ring diagrams using echarts in vue

    This article mainly introduces the example code of using echarts to make ring diagrams in vue. The code is simple and easy to understand, very good, and has certain reference value. Friends who need it can refer to it.
    2018-07-07

Latest Comments