基于element-ui实现el-select-tree

前言

在大多数的后台系统的项目中，都会用到下拉树形结构框。这里会提到一个el-select-tree插件，最终的效果，就是下面的图示。

效果

文档地址： el-select-tree

代码实现

前提

安装：npm install el-select-tree --save

<template>
  <div>
    <el-select-tree :default-expand-all="defaultExpandAll" :multiple="multiple" :placeholder="placeholder" :disabled="disabled"
      :data="data" :props="defaultProps" :check-strictly="checkStrictly" :clearable="clearable" :popover-width="popoverWidth"
      v-model="classify_id"></el-select-tree>
  </div>
</template>

<script>
  import ElSelectTree from 'el-select-tree';
  export default {
    components: {
      ElSelectTree
    },
    data() {
      return {
      	classify_id: 0,
        clearable: true,
        defaultExpandAll: true,
        multiple: false,
        placeholder: '请选择',
        disabled: false,
        checkStrictly: false,
        data: [{
            id: 1,
            label: "一级 1",
            children: [{
              id: 4,
              label: "二级 1-1"
            }]
          },
          {
            id: 2,
            label: "一级 2",
            children: [{
                id: 5,
                label: "二级 2-1"
              },
              {
                id: 6,
                label: "二级 2-2"
              }
            ]
          },
          {
            id: 3,
            label: "一级 3",
            children: [{
                id: 7,
                label: "二级 3-1"
              },
              {
                id: 8,
                label: "二级 3-2"
              }
            ]
          }
        ],
        defaultProps: {
          children: "children",
           label: "label"
        },
        popoverWidth: -1,
      }
    }
  }
</script>

<style>
</style>