基础用法

只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。

禁用

通过在数据源中设置 disabled 字段来声明该选项是禁用的

本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled

清空

通过 clearable 设置输入框可清空

显示： 最后一级

属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

<template>
  <div>
      <el-cascader :show-all-levels="false" :options="options"   :props="{ expandTrigger: 'hover',multiple: true, checkStrictly: true  }" collapse-tags clearable>

      </el-cascader>


   </div>

</template>

<script>
  export default {
    data () {
      return {
        options: [
         //一级菜单
         {
            value: 'zhinan',
            label: '指南',

            children: [
              // 二级菜单
              {
                value: 'shejiyuanze',
                label: '设计原则',
                disabled: true,
                children: [

                  //三级菜单
                  { value: 'yizhi',label: '一致'},
                  {value: 'fankui',label: '反馈'},
                  {value: 'xiaolv',label: '效率'},
                  {value: 'kekong',label: '可控'},
                  {value: 'test',label: '友善'},
                ],
              },
            ],
          },

          {
            value: "install",
            label: "安装",
            children: [
              {
                value: "script",
                label: "脚本安装",
                children: [
                  {
                    value: "linux",
                    label: "Linux",
                    children: [
                      { value: "one", label: "ONE"},
                      { value: "two", label: "TWO"}
                    ]
                  }
                ]
              }
            ]
          }
        ]
      };
    }
  }
</script>

<style>

</style>