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'
            }
        ]
    }
];
 

 

转载于:https://my.oschina.net/u/4099729/blog/3061428