[JavaScript知识库]基于vue实现精妙绝伦的三级联动

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

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

<template>
  <view class="index">
    <!-- 三级联动控件   -->
    <view class="select_btn" @tap="openSelect">开启选择</view>
    <view>选中信息为： {{ result }}</view>
    <view>
      <AtFloatLayout :isOpened="flag" title="三级联动选择" @close="handleClose">
        <!-- 一级选择 -->
        <at-flex
          wrap="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>