Vue Element UI 层级菜单显示实例 （详解）

View

<template>
  <div>
    <div>层级菜单显示</div>
    <!- clearable 可清除 级联 :options 级联数据 show-all-levels 展示所有等级 props 配置文件 -->

    <el-cascader :show-all-levels="false" v-model="data_tree" options="data_tree" :props="defaultprops"
                 clearable></el-cascader>

  </div>
</template>

<script>
  export default {

    data () {
      return {
        //级联数据集
        data_tree: [],
        //级联数据值
        data_tree_id: '',
        //级联配置文件
       defaultprops: {
          //选择任意层级
          checkStrictly: true,
          emitPath: false,
          label: 'name',
          value: 'id',
          options: Array,
          props: Object,
          size: String,
          placeholder: {
            type: String,
            default: () => t('el.cascader.placeholder')
          },
          disabled: Boolean,
          clearable: Boolean,
          filterable: Boolean,
          filterMethod: Function,
          separator: {
            type: String,
            default: ' / '
          },
          showAllLevels: {
            type: Boolean,
            default: true
          },
          collapseTags: Boolean,
          debounce: {
            type: Number,
            default: 300
          },
          beforeFilter: {
            type: Function,
            default: () => (() => {
            })
          },
          popperClass: String
        }
      }
    },
    create () {
      //获取级联数据
      getData()
    },
    methods: {
      async getData () {
        this.data_tree = await get('data_tree')
      }
    }
  }
</script>