vue中，component动态组件的实际应用（二）

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>