首页 > 编程 > JavaScript > 正文

vue动态配置模板 'component is'代码

2019-11-19 11:14:00
字体:
来源:转载
供稿:网友

实现代码如下

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表