Vue2结合el-cascader级联下拉获取当前选中的所有级别的id和label

实现效果如下:

需求:

1、要给后端大佬传递当前选中级别所有父级以及祖籍的id和label。(不仅仅传递最后一级哦)

2、其次要求按后端大佬给的传递字段进行拼接,如 第一级 使用level1Id和level1Name,其他依次类推。。。

3、虽然搞不懂为啥要这样传数据,但是后端要求这样的格式,苦恼~~

实现代码如下:

这里写了个简单案例效果

javascript 复制代码
<template>
  <div>
 //:show-all-levels="false" 只显示最后一级
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      :props="{ multiple: true }"
      @change="handleChange"
    />
    <el-button @click="save">保存</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      flatSelectedOptions: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                { value: 'yizhi', label: '一致' },
                { value: 'fankui', label: '反馈' },
                { value: 'xiaolv', label: '效率' },
                { value: 'kekong', label: '可控' }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                { value: 'cexiangdaohang', label: '侧向导航' },
                { value: 'dingbudaohang', label: '顶部导航' }
              ]
            }
          ]
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                { value: 'layout', label: 'Layout 布局' },
                { value: 'color', label: 'Color 色彩' },
                { value: 'typography', label: 'Typography 字体' },
                { value: 'icon', label: 'Icon 图标' },
                { value: 'button', label: 'Button 按钮' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      this.flatSelectedOptions = value.map(item => {
        return this.flattenOption(item, this.options)
      })
    },
    flattenOption(path, options) {
      const result = {}
      path.forEach((value, index) => {
        const option = options.find(opt => opt.value === value)
        if (option) {
          const key = `level${index + 1}Id`  //这里换成后端约定好的字段Id
          const labelKey = `level${index + 1}Name` //这里换成后端约定好的字段Name
          result[key] = value
          result[labelKey] = option.label
          options = option.children // 递归查找下一级选项
        }
      })
      return result
    },
    save() {
    // 当点击保存按钮时,可以拿到处理后的数据
      console.log('处理后的数据:', this.flatSelectedOptions)
    }
  }
}
</script>

这样就大功告成了,和后端交流了俩小时~~~还是妥协了哈

vue3使用方法同理哈,按vue3规范来写即可实现效果!!!!

相关推荐
程序媛小果4 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长8 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~34 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端39 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱42 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js