011_Cascader级联选择器

自由与束缚JavaJavaScript

已于 2022-03-23 12:39:55 修改

阅读量6k

点赞数 1

分类专栏： element-ui 文章标签：前端 javascript 开发语言

于 2022-02-21 12:04:40 首次发布

本文链接：https://blog.csdn.net/aihiao/article/details/123044314

版权

element-ui 专栏收录该内容

57 篇文章 3 订阅

订阅专栏

1. Cascader级联选择器

1.1. 当一个数据集合有清晰的层级结构时, 可通过级联选择器逐级查看并选择。

1.2. Cascader属性

参数	说明	类型	可选值	默认值
value / v-model	选中项绑定值	无	无	无
options	可选项数据源, 键名可通过Props属性配置	array	无	无
props	配置选项, 具体见下表	object	无	无
size	尺寸	string	medium / small / mini	无
placeholder	输入框占位文本	string	无	请选择
disabled	是否禁用	boolean	无	false
clearable	是否支持清空选项	boolean	无	false
show-all-levels	输入框中是否显示选中值的完整路径	boolean	无	true
collapse-tags	多选模式下是否折叠Tag	boolean	无	false
separator	选项分隔符	string	无	斜杠' / '
filterable	是否可搜索选项	boolean	无	无
filter-method	自定义搜索逻辑, 第一个参数是节点node, 第二个参数是搜索关键词keyword, 通过返回布尔值表示是否命中	function(node, keyword)	无	无
debounce	搜索关键词输入的去抖延迟, 毫秒	number	无	300
before-filter	筛选之前的钩子, 参数为输入的值, 若返回false或者返回Promise且被reject, 则停止筛选	function(value)	无	无
popper-class	自定义浮层类名	string	无	无

1.3. Cascader事件

事件名称	说明	回调参数
change	当选中节点变化时触发	选中节点的值
expand-change	当展开节点发生变化时触发	各父级选项值组成的数组
blur	当失去焦点时触发	(event: Event)
focus	当获得焦点时触发	(event: Event)
visible-change	下拉框出现/隐藏时触发	出现则为true, 隐藏则为false
remove-tag	在多选模式下, 移除Tag时触发	移除的Tag对应的节点的值

1.4. Cascader方法

事件名称	说明	参数
getCheckedNodes	获取选中的节点	(leafOnly)是否只是叶子节点, 默认值为false

1.5. Cascader Slots

名称	说明
-	自定义备选项的节点内容, 参数为{ node, data }, 分别为当前节点的Node对象和数据
empty	无匹配选项时的内容

1.6. CascaderPanel属性

参数	说明	类型
value / v-model	选中项绑定值	无
options	可选项数据源, 键名可通过Props属性配置	array
props	配置选项, 具体见下表	object

1.7. CascaderPanel事件

事件名称	说明	回调参数
change	当选中节点变化时触发	选中节点的值
expand-change	当展开节点发生变化时触发	各父级选项值组成的数组

1.8. CascaderPanel方法

方法名	说明	参数
getCheckedNodes	获取选中的节点数组	(leafOnly)是否只是叶子节点, 默认值为false
clearCheckedNodes	清空选中的节点	无

1.9. CascaderPanel Slots

名称	说明
-	自定义备选项的节点内容, 参数为{ node, data }, 分别为当前节点的Node对象和数据

1.10. Props

参数	说明	类型	可选值	默认值
expandTrigger	次级菜单的展开方式	string	click / hover	'click'
multiple	是否多选	boolean	无	false
checkStrictly	是否严格的遵守父子节点不互相关联	boolean	无	false
emitPath	在选中节点改变时, 是否返回由该节点所在的各级菜单的值所组成的数组, 若设置false, 则只返回该节点的值	boolean	无	true
lazy	是否动态加载子节点, 需与lazyLoad方法结合使用	boolean	无	false
lazyLoad	加载动态数据的方法, 仅在lazy为true时有效	function(node, resolve), node为当前点击的节点, resolve为数据加载完成的回调(必须调用)	无	无
value	指定选项的值为选项对象的某个属性值	string	无	'value'
label	指定选项标签为选项对象的某个属性值	string	无	'label'
children	指定选项的子选项为选项对象的某个属性值	string	无	'children'
disabled	指定选项的禁用为选项对象的某个属性值	string	无	'disabled'
leaf	指定选项的叶子节点的标志位为选项对象的某个属性值	string	无	'leaf'

2. Cascader级联选择器例子

2.1. 使用脚手架新建一个名为element-ui-cascader的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Cascader from '../components/Cascader.vue'
import DisabledCascader from '../components/DisabledCascader.vue'
import ClearableCascader from '../components/ClearableCascader.vue'
import MultipleCascader from '../components/MultipleCascader.vue'
import CheckStrictlyCascader from '../components/CheckStrictlyCascader.vue'
import LazyCascader from '../components/LazyCascader.vue'
import SearchCascader from '../components/SearchCascader.vue'
import ScopedCascader from '../components/ScopedCascader.vue'
import PanelCascader from '../components/PanelCascader.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Cascader' },
  { path: '/Cascader', component: Cascader },
  { path: '/DisabledCascader', component: DisabledCascader },
  { path: '/ClearableCascader', component: ClearableCascader },
  { path: '/MultipleCascader', component: MultipleCascader },
  { path: '/CheckStrictlyCascader', component: CheckStrictlyCascader },
  { path: '/LazyCascader', component: LazyCascader },
  { path: '/SearchCascader', component: SearchCascader },
  { path: '/ScopedCascader', component: ScopedCascader },
  { path: '/PanelCascader', component: PanelCascader }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Cascader.vue

<template>
  <div>
    <h1>基础用法-有两种触发子菜单的方式</h1>
    <h4>只需为Cascader的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。</h4>
    <el-row>
      <el-col :span="5">
        <span>默认click触发子菜单: </span>
        <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
      </el-col>
      <el-col :span="5">
        <span>hover触发子菜单: </span>
        <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: [],
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>

2.4. 在components下创建DisabledCascader.vue

<template>
  <div>
    <h1>禁用选项-通过在数据源中设置disabled字段来声明该选项是禁用的</h1>
    <h4>options指定的数组中的第一个元素含有disabled: true键值对, 因此是禁用的。在默认情况下, Cascader会检查数据中每一项的disabled字段是否为true, 如果你的数据中表示禁用含义的字段名不为disabled, 可以通过props.disabled属性来指定(详见下方API表格)。当然, value、label和children这三个字段名也可以通过同样的方式指定。</h4>
    <el-cascader :options="options"></el-cascader>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: '指南',
        disabled: true,
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  }
}
</script>

2.5. 在components下创建ClearableCascader.vue

<template>
  <div>
    <h1>可清空</h1>
    <h4>通过clearable设置输入框可清空。</h4>
    <el-cascader :options="options" clearable></el-cascader>

    <h1>仅显示最后一级</h1>
    <h4>可以仅在输入框中显示选中项最后一级的标签, 而不是选中项所在的完整路径。属性show-all-levels定义了是否显示完整的路径, 将其赋值为false则仅显示最后一级。</h4>
    <el-cascader :options="options" :show-all-levels="false"></el-cascader>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  }
}
</script>

2.6. 在components下创建MultipleCascader.vue

<template>
  <div>
    <h1>多选</h1>
    <h4>可通过props.multiple = true来开启多选模式。在开启多选模式后, 默认情况下会展示所有已选中的选项的Tag, 你可以使用collapse-tags来折叠Tag。</h4>
    <el-row>
      <el-col :span="5">
        <span>默认显示所有Tag: </span>
        <el-cascader :options="options" :props="props" clearable></el-cascader>
      </el-col>
      <el-col :span="5">
        <span>折叠展示Tag: </span>
        <el-cascader :options="options" :props="props" collapse-tags clearable></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      props: { multiple: true },
      options: [{
        value: 1,
        label: '东南',
        children: [{
          value: 2,
          label: '上海',
          children: [
            { value: 3, label: '普陀' },
            { value: 4, label: '黄埔' },
            { value: 5, label: '徐汇' }
          ]
        }, {
          value: 7,
          label: '江苏',
          children: [
            { value: 8, label: '南京' },
            { value: 9, label: '苏州' },
            { value: 10, label: '无锡' }
          ]
        }, {
          value: 12,
          label: '浙江',
          children: [
            { value: 13, label: '杭州' },
            { value: 14, label: '宁波' },
            { value: 15, label: '嘉兴' }
          ]
        }]
      }, {
        value: 17,
        label: '西北',
        children: [{
          value: 18,
          label: '陕西',
          children: [
            { value: 19, label: '西安' },
            { value: 20, label: '延安' }
          ]
        }, {
          value: 21,
          label: '新疆维吾尔族自治区',
          children: [
            { value: 22, label: '乌鲁木齐' },
            { value: 23, label: '克拉玛依' }
          ]
        }]
      }]
    }
  }
}
</script>

2.7. 在components下创建CheckStrictlyCascader.vue

<template>
  <div>
    <h1>选择任意一级选项</h1>
    <h4>在单选模式下, 你只能选择叶子节点; 而在多选模式下, 勾选父节点真正选中的都是叶子节点。启用该功能后, 可让父子节点取消关联, 选择任意一级选项。可通过props.checkStrictly = true来设置父子节点取消选中关联, 从而达到选择任意一级选项的目的。</h4>
    <el-row>
      <el-col :span="5">
        <span>单选选择任意一级选项: </span>
        <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
      </el-col>
      <el-col :span="5">
        <span>多选选择任意一级选项: </span>
        <el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" collapse-tags clearable></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  }
}
</script>

2.8. 在components下创建LazyCascader.vue

<template>
  <div>
    <h1>动态加载-当选中某一级时, 动态加载该级下的选项</h1>
    <h4>通过lazy开启动态加载, 并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数, 第一个参数node为当前点击的节点, 第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态, 还可以对节点数据添加是否为叶子节点的标志位(默认字段为leaf, 可通过props.leaf修改), 否则会简单的以有无子节点来判断是否为叶子节点。</h4>
    <el-cascader :props="props"></el-cascader>
  </div>
</template>

<script>
let id = 0

export default {
  data () {
    return {
      props: {
        lazy: true,
        lazyLoad (node, resolve) {
          const { level } = node
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 })
              .map(item => ({
                value: ++id,
                label: `选项${id}`,
                leaf: level >= 2
              }))
            // 通过调用resolve将子节点数据返回, 通知组件数据加载完成
            resolve(nodes)
          }, 1000)
        }
      }
    }
  }
}
</script>

2.9. 在components下创建SearchCascader.vue

<template>
  <div>
    <h1>可搜索-可以快捷地搜索选项并选择</h1>
    <h4>将filterable赋值为true即可打开搜索功能, 默认会匹配节点的label或所有父节点的label(由show-all-levels决定)中包含输入值的选项。你也可以用filter-method自定义搜索逻辑, 接受一个函数, 第一个参数是节点node, 第二个参数是搜索关键词keyword, 通过返回布尔值表示是否命中。</h4>
    <el-row>
      <el-col :span="5">
        <span>单选可搜索: </span>
        <el-cascader placeholder="试试搜索: 指南" :options="options" filterable></el-cascader>
      </el-col>
      <el-col :span="5">
        <span>多选可搜索: </span>
        <el-cascader placeholder="试试搜索: 指南" :options="options" :props="{ multiple: true }" filterable></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  }
}
</script>

2.10. 在components下创建ScopedCascader.vue

<template>
  <div>
    <h1>自定义节点内容-可以自定义备选项的节点内容</h1>
    <h4>可以通过scoped slot对级联选择器的备选项的节点内容进行自定义, scoped slot会传入两个字段node和data, 分别表示当前节点的Node对象和数据。</h4>
    <el-cascader :options="options">
      <template slot-scope="{ node, data }">
        <span>{{ data.label }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  }
}
</script>

2.11. 在components下创建PanelCascader.vue

<template>
  <div>
    <h1>级联面板</h1>
    <h4>级联面板是级联选择器的核心组件, 与级联选择器一样, 有单选、多选、动态加载等多种功能。和级联选择器一样, 通过options来指定选项, 也可通过props来设置多选、动态加载等功能, 具体详情见API。</h4>
    <el-cascader-panel :options="options"></el-cascader-panel>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  }
}
</script>

2.12. 运行项目, 访问http://localhost:8080/#/Cascader