vue動態配置模板 'component is'

<template>
  <div v-if='object.child'>
      <div  v-for="(item,ix) in object.child" :key="ix">
        <component :is="item.xtype" 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/unit-type.js`).default||{};//1.0
    this.object.child.forEach(item=>{
      if(item.fileName){
        item.objDefault = require(`@/scene/${this.$route.query.typeName}/config/${item.fileName}.js`);//2.0
      }     
    })

    this.object.child.forEach(item=>{//動態顯示當前組件
      if(itemType[item.xtype])
      Vue.component(
        itemType[item.xtype].componentName,
        () => import(`@/components/info-collection/moudel/${itemType[item.xtype].fileName}`)
      )
    })
  }
};
</script>
//1.0=============unit-type.js全部模板配置文件 =======================
export default {
  tablePartMerge: {//表格合併模板xtype
      componentName: "tablePartMerge",//組件名稱
      fileName: "table-partInfo-merge"//文件所在路徑
  },
  tablePartInfo: {
      componentName: "tablePartInfo",
      fileName: "table-partInfo"
  },
  ueditorUnit: {
      componentName: "ueditorUnit",
      fileName: "unit-ueditor"
  },
  filesUnit: {
      componentName: "filesUnit",
      fileName: "unit-files"
  },
  approves: {   // 正文信息(審批記錄)
      componentName: "approves",
      fileName: "approves-unit"
  },
  requiredDate:{  // 要求完成日期
    componentName: "requiredDate",
    fileName: "required-date"
  },
}
//2.0====== table-partInfo-merge.js =========
module.exports = {
  "columns":[{
    "id": "partNumber",
    "disabled": false,
    "name":"物料編碼",
    "placeholder": "",
    "required": true,
    "selectDetail": [],
    "show": false,
    "span": 24,
    "width":"150",
    "xtype": "select"//組件內用的表格
  }]
}

//=============父級傳過來的 object =======================
module.exports = [
    {
        title: '正文信息',
        name: '1',
        id:"",
        child:[
            {
                id:'partInfoData',//id
                show:'true',//是否顯示
                fileName:'tablePartInfo',//文件路徑名
                xtype:'tablePartMerge'//表格模塊
            },
            {
                id:'mainAttachements',//文本編輯器
                show:'true',
                fileName:'',
                xtype:'filesUnit'
            },
            {
                id:'vivo_RequestCompletionTime',//時間選擇模塊
                show:'true',
                fileName:'',
                xtype:'requiredDate'
            },
            {
                id:'approves',
                show:'true',
                fileName:'approval',
                xtype:'approves'
            }
        ]
    }
];
相關文章
相關標籤/搜索