5.级联选择器

5.级联选择器

级联选择器

案例1

• 将静态数据写到级联选择器

<template>
  <div>
    <el-cascader :options="ops"></el-cascader>
  </div>
</template>

<script>
  // import axios from '../utils/myaxios'
  const options = {
    data() {
      return {
        // 通过children来添加子选项,可嵌套多层
        ops: [
          {value: 100, label: '主页', children: [
            {value: 101, label: '菜单1', children:[
              {value: 102, label: '菜单11'},
              {value: 102, label: '菜单12'},
            ]},
            {value: 102, label: '菜单2'},
            {value: 103, label: '菜单3'},
          ]}
        ]
      }
    }
  }
  export default options
</script>

案例2

• 将后端数据写到级联选择器

<template>
  <div>
    <el-cascader :options="ops" clearable></el-cascader>
  </div>
</template>

<script>
import axios from '../utils/myaxios'
  const options = {
    data() {
      return {
        ops: []
      }
    },

    // 组件加载完后将数据填入
    async mounted() {
      const resp = await axios.get('/api/menu')

      // 前端处理发来的数据
      const map = new Map()
      for (const {id, name, pid} of resp.data.data) {
        // 将数据存到map中
        map.set(id, {value: id, label: name, pid: pid})
      }
      const root = []
      for (const obj of map.values()) {
        const parent = map.get(obj.pid) // 获取父标签
        if (parent !== undefined) {
          parent.children ??= []
          parent.children.push(obj) // 添加到父标签里
        } else {
          root.push(obj)  //没有父标签，该标签为根标签
        }
      }
      this.ops = root
    }
  }
  export default options
</script>