vue動態(tài)配置模板 'component is'代碼
更新時間:2019年07月04日 10:56:43 作者:mubail
這篇文章主要介紹了vue動態(tài)配置模板 'component is'代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
實現(xiàn)代碼如下
<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=>{//動態(tài)顯示當前組件
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"http://文件所在路徑
},
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"http://組件內(nèi)用的表格
}]
}
//=============父級傳過來的 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'
}
]
}
];
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
解決v-for中使用v-if或者v-bind:class失效的問題
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題
這篇文章主要介紹了如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結構的方法
這篇文章主要介紹了Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結構,本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實現(xiàn),需要的朋友可以參考下2024-01-01
Vue3響應式方案及ref?reactive的區(qū)別詳解
眾所周知ref和reactive都是用來作響應式數(shù)據(jù),下面這篇文章主要給大家介紹了關于Vue3響應式方案及ref?reactive區(qū)別的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12

