vue中实现级联选择功能

最新推荐文章于 2025-02-21 14:39:32 发布
最新推荐文章于 2025-02-21 14:39:32 发布
阅读量571 收藏 1
点赞数 2
分类专栏： vue+element 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wch19960518/article/details/145009944
版权

目录

实现效果图

在这里插入图片描述

实现功能描述

当前下拉框选中数据为下一个下拉框数据来源的依据，即当前节点为下一选择框数据的父节点，并且当前选择框选中数据更改时，后面的选择框数据也需同步更新。

实现思路

  1. 默认请求第一层数据接口（这里指的是“分公司”这一级数据）
  2. watch监听当前选中的“分公司”值变化时，请求下一级数据源（这里指供热处这一级数据）【在请求数据前先重置下面所有表单项，避免在都选择完后更改某一下拉框，造成有些数据源和选中项还是一次的数据问题】，后面的逻辑就一样。

主要代码

<template>
	<el-dialog
      title="新增"
      :visible.sync="addVisible"
      v-if="addVisible"
      :before-close="addVisibleClose"
      :width="'600px'"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="90px"
        :rules="addRules"
      >
        <el-row :gutter="24">
          <el-col :span="24" style="padding-right: 0">
            <el-form-item label="分公司：" prop="comId">
              <el-select
                placeholder="请选择分公司"
                v-model="addForm.comId"
                style="width: 90%"
                @change="changeCom"
              >
                <el-option
                  v-for="item in coms"
                  :label="item.label"
                  :key="item.id"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-right: 0">
            <el-form-item label="供热处：" prop="heatingId">
              <el-select
                placeholder="请选择供热处"
                v-model="addForm.heatingId"
                style="width: 90%"
                @change="changeGrcs"
              >
                <el-option
                  v-for="item in grcs"
                  :label="item.label"
                  :key="item.id"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-right: 0">
            <el-form-item label="中心站：" prop="centralStationId">
              <el-select
                placeholder="请选择中心站"
                v-model="addForm.centralStationId"
                style="width: 90%"
                @change="changeZxzs"
              >
                <el-option
                  v-for="item in zxzs"
                  :label="item.label"
                  :key="item.id"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24" style="padding-right: 0">
            <el-form-item label="小区：" prop="areaId">
              <el-select
                placeholder="请选择小区"
                v-model="addForm.areaId"
                style="width: 90%"
                @change="changeAreas"
              >
                <el-option
                  v-for="item in areas"
                  :label="item.label"
                  :key="item.id"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24" style="padding-right: 0">
            <el-form-item label="楼栋：" prop="buildId">
              <el-select
                placeholder="请选择楼栋"
                v-model="addForm.buildId"
                style="width: 90%"
                @change="changeBuilds"
              >
                <el-option
                  v-for="item in builds"
                  :label="item.label"
                  :key="item.id"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24" style="padding-right: 0">
            <el-form-item label="单元：" prop="unitId">
              <el-select
                placeholder="请选择单元"
                v-model="addForm.unitId"
                style="width: 90%"
                @change="changeUnits"
              >
                <el-option
                  v-for="item in units"
                  :label="item.label"
                  :key="item.id"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24" style="padding-right: 0">
            <el-form-item label="高/底区：" prop="roomName">
              <el-input
                v-model="addForm.roomName"
                placeholder="请输入高/底区"
                style="width: 90%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisibleClose">取 消</el-button>
        <el-button type="primary" @click="addVisibleOk">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
export default {
	data() {
		return {
			coms: [],
      		grcs: [],
      		zxzs: [],
      		areas: [],
      		builds: [],
      		units: [],
      		addForm: {
        		comId: "",
        		comName: "",
        		heatingId: "",
        		heatingName: "",
        		centralStationId: "",
        		centralStationName: "",
        		areaId: "",
        		areaName: "",
        		buildId: "",
        		buildName: "",
        		unitId: "",
        		unitName: "",
        		roomName: "",
      		},
      		addRules: {
        		comId: [{ required: true, message: "请选择分公司", trigger: "change" }],
        		heatingId: [{ required: true, message: "请选择供热处", trigger: "change"}],
        		centralStationId: [{ required: true, message: "请选择中心站", trigger: "change" }],
        		areaId: [{ required: true, message: "请选择小区", trigger: "change" }],
        		buildId: [{ required: true, message: "请选择楼栋", trigger: "change" }],
        		unitId: [{ required: true, message: "请选择单元", trigger: "change" }],
      		}
		}
	},
	watch: {
    "addForm.comId": {
      immediate: true,
      handler(value) {
        if (!!value) {
          this.addForm.heatingId = "";
          this.addForm.heatingName = "";
          this.addForm.centralStationId = "";
          this.addForm.centralStationName = "";
          this.addForm.areaId = "";
          this.addForm.areaName = "";
          this.addForm.buildId = "";
          this.addForm.buildName = "";
          this.addForm.unitId = "";
          this.addForm.unitName = "";
          // this.addForm.roomName = "";
          this.grcs = [];
          this.zxzs = [];
          this.areas = [];
          this.builds = [];
          this.units = [];
          this.getGrcs();
        }
      },
    },
    "addForm.heatingId": {
      immediate: true,
      handler(value) {
        if (!!value) {
          this.addForm.centralStationId = "";
          this.addForm.centralStationName = "";
          this.addForm.areaId = "";
          this.addForm.areaName = "";
          this.addForm.buildId = "";
          this.addForm.buildName = "";
          this.addForm.unitId = "";
          this.addForm.unitName = "";
          // this.addForm.roomName = "";
          this.zxzs = [];
          this.areas = [];
          this.builds = [];
          this.units = [];
          this.getZxzs();
        }
      },
    },
    "addForm.centralStationId": {
      immediate: true,
      handler(value) {
        if (!!value) {
          this.addForm.areaId = "";
          this.addForm.areaName = "";
          this.addForm.buildId = "";
          this.addForm.buildName = "";
          this.addForm.unitId = "";
          this.addForm.unitName = "";
          // this.addForm.roomName = "";
          this.areas = [];
          this.builds = [];
          this.units = [];
          this.getArea();
        }
      },
    },
    "addForm.areaId": {
      immediate: true,
      handler(value) {
        if (!!value) {
          this.addForm.buildId = "";
          this.addForm.buildName = "";
          this.addForm.unitId = "";
          this.addForm.unitName = "";
          // this.addForm.roomName = "";
          this.builds = [];
          this.units = [];
          this.getBuild();
        }
      },
    },
    "addForm.buildId": {
      immediate: true,
      handler(value) {
        if (!!value) {
          this.addForm.unitId = "";
          this.addForm.unitName = "";
          // this.addForm.roomName = "";
          this.units = [];
          this.getUnit();
        }
      },
    },
  },
  methods: {
  	// 我这里监听change是因为接口也需要传选中项的名字（看需要添加）
  	changeCom(value) {
      const selectedOption = this.coms.find((option) => option.id === value);
      this.addForm.comName = selectedOption?.label;
    },
    changeGrcs(value) {
      const selectedOption = this.grcs.find((option) => option.id === value);
      this.addForm.heatingName = selectedOption?.label;
    },
    changeZxzs(value) {
      const selectedOption = this.zxzs.find((option) => option.id === value);
      this.addForm.centralStationName = selectedOption?.label;
    },
    changeAreas(value) {
      const selectedOption = this.areas.find((option) => option.id === value);
      this.addForm.areaName = selectedOption?.label;
    },
    changeBuilds(value) {
      const selectedOption = this.builds.find((option) => option.id === value);
      this.addForm.buildName = selectedOption?.label;
    },
    changeUnits(value) {
      const selectedOption = this.units.find((option) => option.id === value);
      this.addForm.unitName = selectedOption?.label;
    },
    // 第一级数据源，即分公司（在dialog显示就获取）
    getOrgs() {
      const data = {
        equipType: "t_org_customer",
        level: this.$store.state.user.user.dept.deptLevel,
        id: this.$store.state.user.user.dept.deptId,
      };
      listLazyDept(data).then(({ data }) => {
        this.coms = data;
      });
    },
    getGrcs() {
      const params = {
        equipType: "t_org_customer",
        level: "fgs",
        id: this.addForm.comId,
      };
      listLazyDept(params).then(({ data }) => {
        this.grcs = data;
      });
    },
    getZxzs() {
      const params = {
        equipType: "t_org_customer",
        level: "grc",
        id: this.addForm.heatingId,
      };
      listLazyDept(params).then(({ data }) => {
        this.zxzs = data;
      });
    },
    getArea() {
      const params = {
        equipType: "t_org_customer",
        level: "zxz",
        id: this.addForm.centralStationId,
      };
      listLazyDept(params).then(({ data }) => {
        this.areas = data;
      });
    },
    getBuild() {
      const params = {
        equipType: "t_org_customer",
        level: "xq",
        id: this.addForm.areaId,
      };
      listLazyDept(params).then(({ data }) => {
        this.builds = data;
      });
    },
    getUnit() {
      const params = {
        equipType: "t_org_customer",
        level: "ld",
        id: this.addForm.buildId,
      };
      listLazyDept(params).then(({ data }) => {
        this.units = data;
      });
    },
    // 点击【新增】出发的方法
    addFun() {
      this.coms = [];
      this.grcs = [];
      this.zxzs = [];
      this.areas = [];
      this.builds = [];
      this.units = [];
      this.addForm = {
        comId: "",
        comName: "",
        heatingId: "",
        heatingName: "",
        centralStationId: "",
        areaId: "",
        areaName: "",
        buildId: "",
        buildName: "",
        unitId: "",
        unitName: "",
      };
      this.getOrgs();
      this.addVisible = true;
    },
    addVisibleClose() {
      this.addVisible = false;
    },
    addVisibleOk() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$modal.loading("请稍候...");
          let data = {
            ...this.addForm,
            equipType: "cjq_add",
          };
          jcqSaveApi(data)
            .then(() => {
              this.$message({
                type: "success",
                message: "新增成功!",
              });
              this.getList();
            })
            .finally(() => {
              this.addVisible = false;
              this.$modal.closeLoading();
            });
        }
      });
    },
  },
}
</script>
app稳定性测试之Monkey工具！
05-22 1752
Monkey是一款针对Android应用程序的自动化测试工具，它的名字寓意着像猴子一样在软件上随机乱敲按键，以此来模拟用户的随机操作。通过向系统发送伪随机的用户事件流(如按键输入、触摸屏输入、滑动Trackball、手势输入等操作)，Monkey可以对设备上的程序进行测试，检测程序在长时间运行下的稳定性，并观察程序在何种情况下会出现异常。
稳定性测试Fastbot-Andriod
m0_71999197的博客
03-08 524
Fastbot基于model-based testing 结合机器学习、强化学习的APP 稳定性测试工具。
Fastbot_Android 介绍
最新发布
jxhln的博客
02-21 79
ADBKeyBoard在输入栏自动输入内容，屏蔽UI输入法遇到搜索栏乱输入，想要输入指定字符下载 ADBKeyBoard，并在手机端中设置为默认输入法 ADBKeyBoard下载地址，生效后，当遇到输入栏ADBKeyBoard不会弹起ui输入栏，会显示配置max.config中在pc端新建max.config文件（文件名称不可更改）输入通过以下命令将max.config文件push到手机端从文件中随机读取字符串输入配置max.config中在pc端新建文件（文件名称不可更改）
【测试工具】Fastbot 客户端稳定性测试
gogoboi_jin的博客
11-04 1479
做这个主要为了发版之前提前发现崩溃，风险前置。适合客户端很重的业务。优点：你不改动也能用， 维护成本不高。缺点：容易进入H5页面无法返回，效果有限。备注：我这边接手别人维护，公司降本把测开工作给到我这边了。test目录放了相关的各个包定向配置文件（具体查看 push定向配置部分）。需要针对不同的进行定制，对应包的配置值在运行服务器上存放，没有添加git代码中相关的jar需要人工手动的push到 手机的/sdcard 目录中， test目录下的相关配置文件java程序每次安装新包的时候，会重新push到手机/
android 稳定性测试工具,APP 稳定性测试工具-Fastbot_Android详解
weixin_39897887的博客
05-25 575
基于monkey的二次开发，约束monkey的行为，比monkey更智能。写在开始monkey测试的随机性概率过大，导致其效率并不能达到预期。有时可能遍历了很久，依旧与最有可能发生问题的部分擦肩而过。Fastbot_Android介绍基于model-based testing 结合机器学习、强化学习的APP 稳定性测试⼯具优势1.模拟机和真机均可以2.继承原⽣Monkey的优势，快速点击，每秒...
Fastbot稳定性测试
weixin_44775434的博客
05-05 2200
Fastbot 稳定性测试的特点主要在于：使用简单，可快速上手操作，其探索过程中其对探索应用的深度和范围都比现有的 monkey 要更好，同时也可以满足对特定的业务进行定向测试的需求。
3分钟了解Android中稳定性测试
qq_53071851的博客
05-24 419
一、什么是Monkey，Monkey在英文里的含义是猴子，在测试行业的学名叫“猴子测试”，指的是没有测试经验的人甚至是根本不懂计算机的人（就像一只猴子），不需要知道程序的任何用户交互方面的知识，给他一个程序，他就会对他看到的任何界面进行操作，当然操作是无目的的、随便乱按乱点的，这种测试在产品周期的早期阶段会很有效，为用户节省了很多时间。Monkey 是 Android平台提供的一种自动化测试方法，它会随机的模拟发送各种按键，点击，滑动等用户事件来实现压力测试。看系统版本是否稳定，能否持续的为用户提供服务
APP稳定性测试工具fastbot（字节开源项目）
热门推荐
hdandan2015的博客
09-16 1万+
1、简介 fastbot是字节团队基于monkey的二次开发的app稳定性测试工具，目前已经开源，此工具有比较深入的算法探索，目前已经更新了多个版本，相对稳定的支持了移动端app、H5页面的自动化遍历，支持定制测试、当发生crash、anr时会有比较全的log可导出供分析。 简介参考testhome:字节跳动质量利器 -- 移动端智能化稳定性测试工具 Fastbot-Android/iOS 双端重磅发布上线 · TesterHome 更多详情参见：奔跑吧！智能Monkey之Fastbot跨平台 此开
python：快速启动-android稳定性测试
一名小测试
02-23 2074
快速启动-android稳定性测试 前置条件： 需安装adb环境、需安装adb环境、需安装adb环境，重要事情说三遍 项目简介： 结合字节跳动提供的开源工具Fastbot_android, 进行封装了基础版的稳定性测试，只需要数据线连接电脑，并确定在cmd中输入adb devices，看到了手机设备号，即可运行命令。 修改日志 第二版主要是优化读取命令的方式、简化了命令行输入命令、增加自定义元素点击及工程目录的创建 安装包 pipinstallfastrun 网站简介 https://py..
python：app稳定性测试工具
一名小测试
02-17 6752
工作中因要测试app的稳定性，市场上多用于monkey进行稳定测试，而字节跳动开源了一个基于monkey的稳定性测试工具Fastbot，使用了一阶段，超级棒. 因为每次都要去输入一堆命令，故写了一个第三方包，主要功能是基于持续几分钟的点击效果 首先是构建包 创建一个包的工程目录： #\launchProject\setup.py fromsetuptoolsimportsetup,find_packages withopen("README.md","r",encodin...
APP智能遍历工具-Fastbot
qq_42264956的博客
09-18 2415
APP智能遍历工具-Fastbot
Fastbot_Android:Fastbot（2.0）是基于模型的测试工具，用于对GUI过渡进行建模以发现应用程序稳定性问题
04-13
Fastbot-Android开源手册 介绍 Fastbot是基于模型的测试工具，用于对GUI过渡进行建模以发现应用程序稳定性问题。 它结合了机器学习和强化学习技术，以更智能的方式帮助发现。 Fastbot中的GUI状态抽象是通过参考项目APE实现的。 特征 Fastbot与多种Android OS系统兼容，包括原始Android，Android 5-11以及国内制造商对基于Andriod的修改后的系统的变体。 从原始的Monkey继承而来，Fastbot允许每秒插入多达12个动作的快速动作。 专家系统具备根据不同业务线的需求进行深度定制的能力。 Fastbot是基于模型的测试工具。 模型是通过考虑高奖励选择选择的图过渡来构建的。 Fastbot通过计算机视觉技术（例如YOLOv3，ocr和cv分段）支持非标准小部件。 Fastbot-iOS：正在建设中 用法 环境准备 确保您的
Android稳定性测试APK
08-15
Android稳定性测试APK，可以进行稳定性测试和平板耗电测试。
Android APP 稳定性测试工具—Fastboot使用教程
u014802464的博客
08-23 5362
测试工具，Android APP 稳定性测试工具
APP稳定性测试工具：Monkey
qq_43371695的博客
09-19 233
Monkey 是一款 app 的自动化测试工具，monkey 是猴子的意思，所以从原理上说，它的自动化测试就类似猴子一样在软件上乱敲按键，猴子什么都不懂，就爱捣乱。Monkey 原理也是类似，通过向系统发送伪随机的用户事件流(如按键输入、触摸屏输入、滑动 Trackball、手势输入等操作)，来对设备上的程序进行测试，检测程序长时间的稳定性，多久的时间会发生异常。
安卓稳定性测试必备工具Monkey详解
软件测试技术交流分享
08-11 683
Monkey主要就是为了测试APP，是否会出现崩溃
Android稳定性测试利器-Monkey介绍及环境配置
nicolas_li的专栏
07-27 4584
 一、什么是Monkey Monkey是Android中的一个命令行工具，可以运行在Android模拟器或手机设备中。它向系统发送伪随机的用户事件流(如屏幕的点击、滑动和系统按键操作等)，实现对正在开发的app进行压力测试。Monkey主要用于对android系统中开发的app进行稳定性测试。 Monkey在使用时需要通过USB将手机设备与PC相连，在PC端使用Adb shell命令调用
App稳定性测试-Fastbot使用笔记
qq_38032510的博客
11-18 1万+
app稳定性测试工具使用方法
Android APP稳定性测试工具Fastbot
测试开发小记
11-14 4428
Fastbot是由字节跳动 Quality Lab开源的一款基于model-based testing 结合机器学习、强化学习的APP 稳定性测试工具，提供了Android和iOS版本。本文记录一下Fastbot的使用方法。
fastbot 字节
09-18
fastbot 是字节跳动旗下的一个智能助手，在2021年推出。它具有多项功能，可以为用户提供语音交互、信息搜索、日程管理、天气查询等等服务。 首先，fastbot 的语音交互功能非常强大。它可以听懂用户的语音指令，并通过智能算法进行解析和理解。用户可以通过语音的方式与fastbot 进行对话，非常方便。 其次，fastbot 可以进行信息搜索。用户可以向fastbot 提出问题或者搜索请求，fastbot 会通过搜索引擎或者自有数据库快速找到答案并反馈给用户。这对于用户获取信息非常便捷。 此外，fastbot 还具备日程管理功能。用户可以在fastbot 中设置提醒事项、安排日程，fastbot 会在事项发生之前提醒用户，帮助用户合理安排时间。 最后，fastbot 还可以查询天气。用户可以询问fastbot当天或者未来几天的天气情况，fastbot 会通过调用天气接口提供详细的天气预报，帮助用户合理出行。 总而言之，fastbot 字节是一个功能强大的智能助手，它通过语音交互、信息搜索、日程管理和天气查询等多项功能，可以提供便捷的服务，帮助用户更高效地处理各种事务。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值