处理非树形结构的级联选择器(递归)

最新推荐文章于 2024-09-05 11:00:53 发布

xiaohuichonga

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量82

点赞数

文章标签： javascript vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/xiaohuichonga/article/details/129693539

版权

文章展示了如何在JavaScript中使用递归函数处理非树形结构的数据，将它们转换为适用于Vue.js组件（如el-cascader）的格式。同时，讨论了自定义CSS样式以创建一个API接口信息的下拉列表，利用el-popover组件显示详细信息。在处理过程中，数据的controllerName作为标签，uri作为值，而mappings则用于渲染多级数据。

摘要由CSDN通过智能技术生成

js:

   // 递归处理非树形结构次联
      addUriAndRename(data, uri) {
      return data.map(item => {
        const newItem = {
          ...item,
          uri: uri || item.uri,
          controllerName: item.mappingName || item.controllerName,
          mappings: item.mappings ? this.addUriAndRename(item.mappings) : undefined
        };
        delete newItem.mappingName;
        return newItem;
      });
    },

  // Api接口信息 下拉列表
    async getUrlList() {
      const { data: res } = await this.$http.get('/home/apis')
      if (res.code === 20000) {
        this.UrlOptions = this.addUriAndRename(res.data, '/')
        console.log(res.data)
      }
    },

css:

<!--   非数组次联 一对多 数据源: UrlOptions    -->
              <el-cascader :options="UrlOptions"
                :props="{  value: 'uri', label: 'controllerName', children: 'mappings' }"
                :show-all-levels="false"
                v-model="addForm.uri">
              </el-cascader>

效果图:

自己手写,样式不好看:

思路:

拿到数据后,第一层渲染左侧数据,使用 popover 组件包裹点击显示(或经过触发显示)循环右侧数据

<el-select>
 <el-option
        v-for="(item, index) in UrlOptions"
        :key="index"
        :label="item.controllerName"
        :value="item.controllerName"
       >
          <el-popover placement="right" width="180"  trigger="hover">
              <span slot="reference"  class="urlSpan"> {{ item.controllerName }}</span>
                   <div v-if="item.mappings">
                     <div v-for="item2 in item.mappings" :key="item.uri">
                       {{ item2.mappingName }}
                     </div>
                   </div>
            </el-popover>
     </el-option> -->
            <!-- <div v-for="(item,index) in UrlOptions" :key="index">
            </div> -->
 </el-select>