发表更新前端2 分钟读完 (大约248个字)

虎符前端工程实践3

  • 下拉框

figure 1

  • 删除顶部命名空间的显示

    将 <span class="base">{{ $t('namespace') }}：{{ projectDetail.namespace }}</span><br> 替换成 <br>

  • 命名空间下拉框

    仿照 newContainer/index.vue 部分代码实现下拉框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <template>
    ...
        <el-form-item :label="$t('namespace')" prop="namespace">
          <el-select v-model="ruleForm.namespace" :placeholder="$t('please')+$t('choose')+$t('namespace')" style="width: 100%">
            <el-option
              v-for="ns in namespaceOptions"
              :label="ns"
              :value="ns">
            </el-option>
          </el-select>
        </el-form-item>
    ...
    </template>

    <script>
        methods: {
            fetchData() {
                 getNSList().then(response => {
            this.namespaceOptions = response.data.nsList
          })
            }
        }
    </script>

  • 国际化

    采用 $t('namespace')，通过 Vue I18n 库实现国际化

  • 修改应用命名空间的时候，不显示“default”(同时”应用管理/容器应用/新建容器”页面的下拉框也不显示“default”，即两个页面都要做此操作)

    namespaceOptions 是通过 getNSList() 获取数据的，后端是在 ResouceController 的 getNamespaces 继续调数据的，所以从根源上去掉 default 好像不太现实。前端有两种办法

    • v-if="ns !== 'default'，在下拉列表的时候去掉
    • this.namespaceOptions = response.data.nsList.filter(ns => ns !== 'default') 在请求列表数据后筛掉，我采取这个办法

  • 只有在容器在”STOP”状态允许更改命名空间

    加入 :disabled="projectStatus!=='STOP' "

#
×