el-cascader-panel 三级列表数据展示和回显实现方法详解

前端

2023-10-26 04:35:08

使用 Element UI 实现三级级联菜单

在 Web 开发中，级联菜单是一种常见的组件，允许用户通过逐层选择来缩小搜索范围。对于需要处理复杂分类或层次结构的应用程序来说，它特别有用。

Element UI 的 el-cascader-panel 组件

Element UI 是一个流行的前端框架，它提供了 el-cascader-panel 组件，用于轻松实现级联菜单功能。它允许我们指定一个包含多层级数据的数组，并通过选项的嵌套来创建级联效果。

实现三级级联菜单

要使用 el-cascader-panel 组件实现三级级联菜单，我们需要执行以下步骤：

定义三级列表数据： 创建一个包含三级分类名称和 ID 的嵌套数组。
渲染级联菜单： 在组件模板中，使用 v-for 指令遍历数据数组并生成选项。
绑定值： 通过 v-model 绑定来获取和设置用户选择的分类 ID。

<template>
  <el-cascader-panel
    :data="listData"
    v-model="value"
  />
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          name: '一级分类 1',
          id: 1,
          children: [
            {
              name: '二级分类 1-1',
              id: 11,
              children: [
                {
                  name: '三级分类 1-1-1',
                  id: 111
                },
                {
                  name: '三级分类 1-1-2',
                  id: 112
                }
              ]
            },
            {
              name: '二级分类 1-2',
              id: 12,
              children: [
                {
                  name: '三级分类 1-2-1',
                  id: 121
                },
                {
                  name: '三级分类 1-2-2',
                  id: 122
                }
              ]
            }
          ]
        },
        {
          name: '一级分类 2',
          id: 2,
          children: [
            {
              name: '二级分类 2-1',
              id: 21,
              children: [
                {
                  name: '三级分类 2-1-1',
                  id: 211
                },
                {
                  name: '三级分类 2-1-2',
                  id: 212
                }
              ]
            },
            {
              name: '二级分类 2-2',
              id: 22,
              children: [
                {
                  name: '三级分类 2-2-1',
                  id: 221
                },
                {
                  name: '三级分类 2-2-2',
                  id: 222
                }
              ]
            }
          ]
        }
      ],
      value: []
    }
  }
}
</script>