vue+element-ui之Cascader 级联选择器

最新推荐文章于 2024-06-04 08:06:17 发布

小卿玖

最新推荐文章于 2024-06-04 08:06:17 发布

阅读量525

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_48957210/article/details/125419815

版权

<template>
  <div id="app">
    <el-cascader v-model="value" :options="list" :props="optionsProps">
    </el-cascader>
  </div>
</template>

修改props里面的值

  data() {
    return {
      value: [],
      date: 6666,
      optionsProps: {
        value: 'deptId',
        label: "deptName",
        children: 'children',
        expandTrigger: 'hover'
      },
      list: [
        {
          deptId: 100,
          parentId: 0,
          deptName: "若依科技",
          children: [
            {
              deptId: 101,
              parentId: 100,
              deptName: "深圳总公司",
              children: [
                {
                  deptId: 103,
                  parentId: 101,
                  deptName: "研发部门",
                },
                {
                  deptId: 104,
                  parentId: 101,
                  deptName: "市场部门",
                },
              ]
            },
            {
              deptId: 102,
              parentId: 100,
              deptName: "长沙分公司",
              children: [
                {
                  deptId: 108,
                  parentId: 102,
                }
              ]
            }
          ]

        }
      ],
    }
  },

效果如图: