基于vue实现精妙绝伦的三级联动

ps：笔者为初学者，自己想的不容易，别喷我

<template><view class="index"><!-- 三级联动控件   --><view class="select_btn" @tap="openSelect">开启选择</view><view>选中信息为： {{ result }}</view><view><AtFloatLayout :isOpened="flag" title="三级联动选择" @close="handleClose"><!-- 一级选择 --><at-flexwrap="wrap"v-for="(item, index) in dataList"@tap="select(item, index)"class="lines"><at-flex-item :size="10">{{ item.name }}</at-flex-item><at-flex-item :size="2">></at-flex-item></at-flex></AtFloatLayout></view></view>
</template><script>
import { ref } from "vue";
import { AtFlex, AtFlexItem, AtInput } from "taro-ui-vue3";
import "./index.scss";export default {data() {return {flag: false,dataList: [],result: "",firstDataList: [{ name: "总公司" }, { name: "子公司" }],secondDataList: [{ name: "开发部" },{ name: "销售部" },{ name: "人事部" },{ name: "财务部" },],secondDataList1: [{ name: "北京××××" },{ name: "沈阳××××" },{ name: "上海××××" },{ name: "合肥××××" },{ name: "广州××××" },],thirdDataList: [{ name: "分公司的开发部" },{ name: "分公司的销售部" },{ name: "分公司的人事部" },{ name: "分公司的财务部" },],};},created() {this.dataList = this.firstDataList;},methods: {pressLong() {},handleClose() {// 关闭逻辑已完整this.flag = false;this.dataList = this.firstDataList;},openSelect() {this.flag = true;},isEqual(arr1, arr2) {for (let i = 0; i <= arr1.length; i++) {if (arr1[i] !== arr2[i]) {return false;} else {continue;}}return true;},select(item, index) {let vm = this;if (this.isEqual(this.firstDataList, this.dataList)) {vm.result = "";console.log("1-1 选择成功");switch (index) {case 0:vm.dataList = vm.secondDataList;vm.result = vm.result + item.name;console.log("前往2-1");break;case 1:vm.dataList = vm.secondDataList1;vm.result = vm.result + item.name;console.log("前往2-2");break;}} else if (this.isEqual(this.secondDataList, this.dataList)) {vm.result = vm.result + item.name;vm.flag = false;this.dataList = this.firstDataList;console.log("2-1后关闭");} else if (this.isEqual(this.secondDataList1, this.dataList)) {vm.result = vm.result + item.name;vm.dataList = vm.thirdDataList;console.log("2-2后继续选择");} else if (this.isEqual(this.thirdDataList, this.dataList)) {vm.result = vm.result + item.name;vm.flag = false;this.dataList = this.firstDataList;console.log("3-1后选择结束");}},},
};
</script>

基于vue实现精妙绝伦的三级联动相关推荐

基于vue开发的多条件联动筛选特效（类似京东/淘宝/中国移动）
基于vue实现的多条件联动筛选功能(类似中国移动商城),选中,反选,删除功能. UI库用的ivew 先来张实现的效果图展开时候的效果收起时候的效果代码如下: 1. html(用了iview的UI ...
vue中实现省市区三级联动(V-Distpicker插件)
本次项目中使用了V-Distpicker 插件实现了省市区三级联动 V-Distpicker 项目文档地址 V-Distpicker git地址使用方法 npm install v-distpick ...
vue移动端省市区三级联动
安装:npm i v-distpicker --save 使用: <div class="address" v-show="pop ...
vue+elementui 省区市三级联动+详细地址信息输入
需求省市区地址由前半部分的级联选择,后面的具体信息利用input框输入.封装成组件,已有的地址信息由父组件传入,此组件能显示已有的地址信息,且能修改地址的功能. 一.省市区三级联动 1.安装依赖 n ...
基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
前端 vue中使用省市区三级联动
https://blog.csdn.net/qq_33769914/article/details/82878693
ElementUI自定义组件之地区三级联动
由于家里变故和公司变动,近一年多没更新过博客了.近期稍有空暇,在此与有需要的朋友分享一个,基于Vue+ElementUI的地区三级联动组件. 先上效果图上核心代码 MbDistrictPicker ...
省市区三级联动选择组件前端实现
一代码 <template><el-dialog:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'":c ...
python三级联动_ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式比如 ...

基于vue实现精妙绝伦的三级联动

基于vue实现精妙绝伦的三级联动

基于vue实现精妙绝伦的三级联动相关推荐

最新文章

热门文章