vue動(dòng)態(tài)配置模板 'component is'代碼
更新時(shí)間:2019年07月04日 10:56:43 作者:mubail
這篇文章主要介紹了vue動(dòng)態(tài)配置模板 'component is'代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
實(shí)現(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=>{//動(dòng)態(tài)顯示當(dāng)前組件
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)用的表格
}]
}
//=============父級(jí)傳過(guò)來(lá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',//時(shí)間選擇模塊
show:'true',
fileName:'',
xtype:'requiredDate'
},
{
id:'approves',
show:'true',
fileName:'approval',
xtype:'approves'
}
]
}
];
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中使用window的onresize事件方式
這篇文章主要介紹了vue項(xiàng)目中使用window的onresize事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼
本篇文章主要介紹了Vue.js結(jié)合Ueditor的項(xiàng)目實(shí)例代碼,這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值的相關(guān)資料,需要的朋友可以參考下2019-09-09
Element實(shí)現(xiàn)動(dòng)態(tài)表格的示例代碼
最近有有個(gè)項(xiàng)目,通過(guò)選擇不同的查詢指標(biāo)展示不同的表格,所以本文就介紹一下Element實(shí)現(xiàn)動(dòng)態(tài)表格,具體實(shí)現(xiàn)代碼記錄如下,感興趣的可以了解一下2021-08-08
vue中provide?inject的響應(yīng)式監(jiān)聽(tīng)解決方案
這篇文章主要介紹了vue中provide?inject的響應(yīng)式監(jiān)聽(tīng)解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04

