vue中,component动态组件的实际应用(二)
3、组件配置文件
src\views\subgroup\rightUtilityList.js
/*
* @Descripttion:
* @version:
* @Author:
* @Date: 2022-05-26
* @LastEditors:
* @LastEditTime: 2022-05-26
*/
import referenceLayerComponent from './ReferenceLayer.vue';
const rightUtilityList = {
"RW_LINK": {
title: 'RwLink属性列表',
refName: 'RwLinkList',
components: () => import('./RwLink.vue') //1.0、嵌套组件一
},
"RD_LINK_ACCESSLIMIT": {
title: '道路进入限制属性列表',
refName: 'RdLinkAccessLimit',
components: referenceLayerComponent //2.0、嵌套组件二
},
};
const getComponentByKey = (key) => {
console.log('key',key);
console.log('rightUtilityList[key]',rightUtilityList[key]);
if (rightUtilityList[key]) {
return rightUtilityList[key];
}
return null;
};
export default {
getComponentByKey
};
4.1、嵌套组件一
展示效果-嵌套组件一
src\views\subgroup\RwLink.vue
<template>
<div>
<div class='div-pad'>
<el-row>
<el-col :span="8" class='name-label'>LINK号码:</el-col>
<el-col :span="16" class='input-label'>
<el-input :disabled="true" v-model="editObj[editObj.objName].id"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class='name-label'>LINK种别:</el-col>
<el-col :span="16" class='input-label'>
<el-select filterable v-model="editObj[editObj.objName].KIND" placeholder="请选择" class='select-pad'>
<el-option v-for="item in kindList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class='name-label'>LINK形态:</el-col>
<el-col :span="16" class='input-label'>
<el-select filterable v-model="editObj[editObj.objName].FORM" placeholder="请选择" class='select-pad'>
<el-option v-for="item in formList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class='name-label'>图幅号码:</el-col>
<el-col :span="16" class='input-label'>
<el-input :disabled="true" v-model="editObj[editObj.objName].partition_name"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class='name-label'>线路渲染颜色:</el-col>
<el-col :span="16" class='input-label'>
<el-input :disabled="true" v-model="editObj[editObj.objName].COLOR"></el-input>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
// import fastCollapse from "@/components/common/fastCollapse.vue";
export default {
name: "RwLink",
components: { },
computed: {
editObj() {
let editObjData = {
objName: "RW_LINK",
RW_LINK:{
COLOR: "",
FORM: 0,
KIND: 1,
id: 412813230905594,
partition_name: 557467528
},
nmp:{
featureObjectId: 184,
uDate: 1653446047192,
uRecord: 1
}
}
return editObjData;
// return this.$store.state.map.editObjData
}
},
data() {
return {
kindList: [//种别
{ label: '铁路', value: 1 },
{ label: '磁悬浮', value: 2 },
{ label: '地铁/轻轨', value: 3 },
{ label: '有轨电车', value: 4 },
],
formList: [//形态
{ label: '无', value: 0 },
{ label: '桥', value: 1 },
{ label: '隧道', value: 2 }
],
langCodeList: [ // 语言代码
{ label: '大陆', value: 'CHI' },
{ label: '港澳', value: 'CHT' },
{ label: '英文', value: 'ENG' },
{ label: '葡文 ', value: 'POR' },
],
}
},
methods: {
delContactData(){},
/**
* 添加名称组数据
*/
addNameGroup() {
this.editObj[this.editObj.objName].NAMEGROUP = [
this.getNameGroupItem('CHI'),
this.getNameGroupItem('ENG')
]
},
/**
* 获取名称组模型内容
* @param code
* @return {{PHONETIC: string, NAMEGROUP_ID: number, LANG_CODE: *, NAME: string}}
*/
getNameGroupItem(code) {
return {
LANG_CODE: code,
NAME: '',
PHONETIC: '',
NAMEGROUP_ID: 0
}
},
/**
* 删除名称组项
* @param i {number} index
*/
delNameItem(i) {
this.editObj[this.editObj.objName].NAMEGROUP.splice(i, 1);
}
}
}
</script>
<style lang="less" scoped>
.div-pad{
padding: 9px;
}
.name-label {
font-size: 12px;
line-height: 30px;
color: var(--color-light);
}
.input-label {
margin-top: 6px;
}
.remove-btn {
margin-top: 10px;
display: flex;
flex-direction: row-reverse;
}
.remove-btn /deep/ .el-button--default {
padding-left: 3px;
padding-top: 4px;
padding-right: 3px;
width: 21px;
text-align: center;
height: 21px;
}
.name-group {
border: 1px solid var(--button-default-border);
border-radius: 5px;
}
.select-pad{
width:100%;
padding-top:5px
}
</style>