vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法
2024-05-09 09:24:23
vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法
- Cascader 级联选择
- 何时使用
- 代码演示
- 基本
- 选择即改变
- 自定义已选项
- 可以自定义显示
- 默认值
- 禁用选项
- 移入展开
- 动态加载选项
- 搜索
- 大小
- 自定义字段名
- 后缀图标
- API
- showSearch 为对象时，其中的字段：
- 事件
- 方法
- 获得中国省市区县乡镇村数据
Cascader 级联选择
级联选择框。
何时使用
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
代码演示
基本
省市区级联。
<template><a-cascader :options="options" @change="onChange" placeholder="Please select" />
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value) {console.log(value);},},};
</script>
选择即改变
这种交互允许只选中父级选项。
<template><a-cascader :options="options" @change="onChange" changeOnSelect />
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value) {console.log(value);},},};
</script>
自定义已选项
例如给最后一项加上邮编链接。
<template><a-cascader:options="options":defaultValue="['zhejiang', 'hangzhou', 'xihu']"style="width: 100%"><template slot="displayRender" slot-scope="{labels, selectedOptions}"><span v-for="(label, index) in labels" :key="selectedOptions[index].value"><span v-if="index === labels.length - 1">{{label}} (<a @click="e => handleAreaClick(e, label, selectedOptions[index])">{{selectedOptions[index].code}}</a>)</span><span v-else @click="onChange">{{label}} /</span></span></template></a-cascader>
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',code: 752100,},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',code: 453400,},],},],},],};},methods: {onChange(value) {console.log(value);},handleAreaClick(e, label, option) {e.stopPropagation();console.log('clicked', label, option);},},};
</script>
可以自定义显示
切换按钮和结果分开。
<template><span>{{text}} <a-cascader :options="options" @change="onChange"><a href="#">Change city</a></a-cascader></span>
</template><script>export default {data() {return {text: 'Unselect',options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value, selectedOptions) {this.text = selectedOptions.map(o => o.label).join(', ');},},};
</script>
默认值
默认值通过数组的方式指定。
<template><a-cascader:options="options"@change="onChange":defaultValue="['zhejiang', 'hangzhou', 'xihu']"/>
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value) {console.log(value);},},};
</script>
禁用选项
通过指定 options 里的 disabled 字段。
<template><a-cascader :options="options" @change="onChange" />
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',disabled: true,children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value) {console.log(value);},},};
</script>
移入展开
通过移入展开下级菜单，点击完成选择。
<template><a-cascader:options="options":displayRender="displayRender"expandTrigger="hover"@change="onChange"placeholder="Please select"/>
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value) {console.log(value);},displayRender({ labels }) {return labels[labels.length - 1];},},};
</script>
动态加载选项
使用 loadData 实现动态加载选项。
注意：
loadData与showSearch无法一起使用。
<template><a-cascader:options="options"@change="onChange":loadData="loadData"placeholder="Please select"changeOnSelect/>
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',isLeaf: false,},{value: 'jiangsu',label: 'Jiangsu',isLeaf: false,},],};},methods: {onChange(value) {console.log(value);},loadData(selectedOptions) {const targetOption = selectedOptions[selectedOptions.length - 1];targetOption.loading = true;// load options lazilysetTimeout(() => {targetOption.loading = false;targetOption.children = [{label: `${targetOption.label} Dynamic 1`,value: 'dynamic1',},{label: `${targetOption.label} Dynamic 2`,value: 'dynamic2',},];this.options = [...this.options];}, 1000);},},};
</script>
搜索
可以直接搜索选项并选择。
Cascader[showSearch]暂不支持服务端搜索，更多信息见 #5547
大小
不同大小的级联选择器。
<template><div><a-cascader size="large" :options="options" @change="onChange" /><br /><br /><a-cascader :options="options" @change="onChange" /><br /><br /><a-cascader size="small" :options="options" @change="onChange" /><br /><br /></div>
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value) {console.log(value);},},};
</script>
自定义字段名
自定义字段名。
<template><a-cascader:fieldNames="{ label: 'name', value: 'code', children: 'items' }":options="options"@change="onChange"placeholder="Please select"/>
</template><script>const options = [{code: 'zhejiang',name: 'Zhejiang',items: [{code: 'hangzhou',name: 'Hangzhou',items: [{code: 'xihu',name: 'West Lake',},],},],},{code: 'jiangsu',name: 'Jiangsu',items: [{code: 'nanjing',name: 'Nanjing',items: [{code: 'zhonghuamen',name: 'Zhong Hua Men',},],},],},];export default {data() {return {options,};},methods: {onChange(value) {console.log(value);},},};
</script>
后缀图标
省市区级联。
<template><div><a-cascaderstyle="margin-top: 1rem":options="options"@change="onChange"placeholder="Please select"><a-icon type="smile" slot="suffixIcon" class="test" /></a-cascader><a-cascadersuffixIcon="ab"style="margin-top: 1rem":options="options"@change="onChange"placeholder="Please select"/></div>
</template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value) {console.log(value);},},};
</script>
API
<a-cascader :options=“options” @change=“onChange” />
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
allowClear
|
是否支持清除 |
boolean
|
true
|
autoFocus
|
自动获取焦点 |
boolean
|
false
|
changeOnSelect
|
当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 |
boolean
|
false
|
defaultValue
|
默认的选中项 | `string[] | number[]` |
disabled
|
禁用 |
boolean
|
false
|
displayRender
|
选择后展示的渲染函数,可使用 slot=“displayRender” 和 slot-scope=“{labels, selectedOptions}” |
({labels, selectedOptions}) => vNode
|
labels => labels.join(' / ')
|
expandTrigger
|
次级菜单的展开方式，可选 ‘click’ 和 ‘hover’ |
string
|
'click'
|
fieldNames
|
自定义 options 中 label name children 的字段 |
object
|
{ label: 'label', value: 'value', children: 'children' }
|
getPopupContainer
|
菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 |
Function(triggerNode)
|
() => document.body
|
loadData
|
用于动态加载选项，无法与 showSearch 一起使用
|
(selectedOptions) => void
|
-
|
notFoundContent
|
当下拉列表为空时显示的内容 |
string
|
'Not Found'
|
options
|
可选项数据源 |
object
|
-
|
placeholder
|
输入框占位文本 |
string
|
'请选择'
|
popupClassName
|
自定义浮层类名 |
string
|
-
|
popupStyle
|
自定义浮层样式 |
object
|
{}
|
popupPlacement
|
浮层预设位置 bottomLeft bottomRight topLeft topRight
|
Enum
|
bottomLeft
|
popupVisible
|
控制浮层显隐 |
boolean
|
-
|
showSearch
|
在选择框中显示搜索框 |
boolean
|
false
|
size
|
输入框大小，可选 large default small
|
string
|
default
|
suffixIcon
|
自定义的选择框后缀图标 | `string | VNode |
value(v-model)
|
指定选中项 | `string[] | number[]` |
showSearch 为对象时，其中的字段：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
filter
|
接收 inputValue path 两个参数，当 path 符合筛选条件时，应返回 true，反之则返回 false。
|
function(inputValue, path): boolean
|
|
limit
|
搜索结果展示数量 |
boolean
|
50
|
matchInputWidth
|
搜索结果列表是否与输入框同宽 |
boolean
|
|
render
|
用于渲染 filter 后的选项,可使用 slot=“showSearchRender” 和 slot-scope=“{inputValue, path}” |
boolean
|
|
sort
|
用于排序 filter 后的选项 |
boolean
|
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
change
|
选择完成后的回调 |
(value, selectedOptions) => void
|
popupVisibleChange
|
显示/隐藏浮层的回调 |
(value) => void
|
方法
| 名称 | 描述 |
|---|---|
blur()
|
** 移除焦点** |
focus()
|
** 获取焦点** |
获得中国省市区县乡镇村数据
注意，如果需要获得中国省市区数据，可以参考 react 组件的实现 china-division。
vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法相关推荐
- Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式 点击按钮 ...
- 除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
实例 <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}&l ...
- element 方法返回的boolean被当成字符串了_JavaScript 原生对象、属性、方法、事件、事件参数...
/*** 事件参考 https://developer.mozilla.org/zh-CN/docs/Web/Events* Event <- UIEvent <- MouseEvent* ...
- vue 离开页面事件_【必看】58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度...
△ 是新朋友吗?记得先点web前端学习圈关注我哦- 1.vue优点? 答: 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb : 简单易学:国人开发,中文文档,不存在语言障碍 , ...
- for里面调用方法 vue_Vue源码阅读连载之Vue实例
我们学习Vue都是从下面这个例子开始的 new Vue({render: h => h(App), }).$mount('#app') 事实上,所有的Vue项目的组成组件都是一个Vue的实例,最 ...
- clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
- vue组件加载完成之后执行方法_Vue.js实现ready函数加载完之后执行某个函数的方法...
Vue.js实现ready函数加载完之后执行某个函数的方法 发布于 2020-7-10| 复制链接 摘记: vue.js 教程Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面 ...
- Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章 一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结 二.模板语法 1.插值语法 2.指令语法 三.数据绑定 1.单向数据绑定(v-bind) 2 ...
- 产品需求分析与市场分析方法汇总（SWOT+PDCA+波士顿矩阵BCG+5W2H分析法+STAR关键事件分析法+目标管理SMART+时间管理紧急重要矩阵+WBS任务分解法）
产品需求分析与市场分析方法汇总(SWOT+PDCA+波士顿矩阵BCG+5W2H分析法+STAR关键事件分析法+目标管理SMART+时间管理紧急重要矩阵+WBS任务分解法) 产品需求分析与市场分析方法汇 ...
- vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用 参考文章: (1)vue的$nextTi ...
最新文章
- linux 设置与网络同步的时间
- 《JavaScript高级程序设计》节点层次和DOM操作技术
- Qt中子线程创建运行时候出现QObject: Cannot create children for a parent that is in a different thread
- 爬虫总结(五)-- 其他技巧
- Java 程序员必须了解的 7 个性能指标
- 改进的SVN的Commit权限控制
- Java程序员总结出必看的初级~高级技术面试题
- serialize-and-deserialize-bst
- Yum包管理工具的20个常用命令
- MinIO之Windows环境的搭建
- SqlServer中将某字符串按照特定的字符分隔并返回临时表
- Ubuntu和Windows双系统调整启动顺序软件
- 图像分割-阈值分割法
- 平坦瑞利衰落下的QPSK性能仿真
- 微信公众号运营必备神器汇总
- 基于python的安全即时通讯系统
- 跟着Vam一起学习Typescript（第一期）
- Centos使用chrony做时间同步
- 【区块链论文整理】SIGMOD篇（一）
- 网络通信TCP/UDP