vue 实现级联选择器功能

news/2024/9/22 14:28:04/

vue开发中,通过使用 Element UI 的 el-cascader 组件来实现级联选择器功能,下面是一个示例代码,演示如何使用 el-cascader 组件初始化级联选择器,并设置默认值为单位 测试1 和部门 测试11

<template><div><el-cascaderv-model="selectedValues":options="options":props="props"@change="handleChange"placeholder="请选择"></el-cascader></div>
</template>
javascript"><script>
export default {data() {return {// 初始化级联选择器的选中值selectedValues: [],// 级联选择器的数据源options: [{value: '1',label: '测试1',children: [{ value: '2', label: '测试11' },{ value: '3', label: '测试12' }]}],// 自定义配置,用于指定数据结构中的属性名props: {value: 'value',label: 'label',children: 'children'}};},methods: {// 监听级联选择器值变化事件handleChange(selectedValues) {console.log('选中的值:', selectedValues);}},created() {// 设置初始化选中值为单位 '测试1' 和部门 '测试12'this.selectedValues = ['1', '3'];}
};
</script>

在这个示例中,options 数组包含了级联选择器的数据源,其中每个对象表示一个选项,包括 valuelabelchildren 属性。props 对象用于指定数据结构中的属性名,以便 el-cascader 组件正确地解析数据。

通过在 selectedValues 中设置初始选中值为单位 测试1 和部门 测试12,并将其绑定到 el-cascader 组件的 v-model 上,可以在初始化时选中指定的值。


http://www.ppmy.cn/news/1434996.html

相关文章

系统思考—啤酒游戏

最近有不少的合作伙伴来询问我啤酒游戏这个来自于MIT&#xff08;麻省理工学院&#xff09;经典的沙盘&#xff0c;上周刚刚结束Midea旗下的一家公司市场运营部《啤酒游戏沙盘-应对动态性复杂的系统思考智慧》的课程。 参与这次沙盘体验的团队成员深刻体会到了全局思考的重要性…

Maxwell安装使用和简单案例

一、解压 cd /opt/software/ ​ tar -zxvf maxwell-1.29.2.tar.gz -C /opt/module/ ​ cd /opt/module/ 二、MySQL 环境准备 1、修改 mysql 的配置文件 修改 mysql 的配置文件&#xff0c;开启 MySQL Binlog 设置 vi /etc/my.cnf 添加以下内容 server_id1 log-binmysql-…

09 JavaScript学习:对象

对象的概念 在计算机科学中&#xff0c;对象是一种数据结构&#xff0c;用于存储数据和方法&#xff08;也称为函数&#xff09;。对象可以包含属性&#xff08;也称为成员变量&#xff09;和方法&#xff08;也称为成员函数&#xff09;&#xff0c;通过这些属性和方法可以描述…

某零售企业招聘管理体系搭建咨询项目

科学岗位分析&#xff0c;改善招聘流程&#xff0c;提高招聘及时率随着公司不断发展壮大&#xff0c;企业规模逐渐增大&#xff0c;部门设置也日益增多&#xff0c;因此对人员的需求也日益提高。但是目前该企业在人员招聘方面逐渐暴露出一些诸如岗位分析不到位、缺乏整体面试计…

移动端适配之viewport

目录 盒模型&#xff1a;widthcontent&#xff08;padding border&#xff09; class"content-box"内容盒模型&#xff08;W3C盒&#xff09; class"border-box"边框盒模型&#xff08;IE 盒&#xff09; scroll滚动 window浏览器视窗&#xff1a;包括…

git的安装与配置教程--超详细版

一、git的安装 1. 官网下载git git官网地址&#xff1a;https://git-scm.com/download/win/ 选择需要的版本进行下载 2、下载完成之后&#xff0c;双击下载好的exe文件进行安装。 3、默认是C盘&#xff0c;推荐修改一下路径&#xff0c;然后点击下一步 4、Git配置&#xff…

芯片安全(security)

芯片安全包括什么 芯片安全是为了防止芯片数据和程序遭遇非法攻击和访问等导致数据错误或者信息泄露或者非正常运行&#xff1f; 比如指纹信息被泄露&#xff1b;PC被植入非法挖矿程序&#xff1b;非法修改ddr中的数据等。 1.在子系统级别看到的axprot[1]和nsaid(non-securit…

JavaEE初阶之IO流快速顿悟一(超详细)

目录 题外话 正题 IO流 Java.io.FileInputStream int read() int read(byte[] b) 关于异常 Java7的新特性: try-with-resources ( 资源自动关闭) Java.io.FileOutputStream void write(int b) void write(byte[] b) 小结 题外话 十年青铜无人问,一朝顿悟冲王者 前天…