前言

话说最近又遇到一个奇葩的需求！模拟如图，我只写了4个tab，因为实在时编不出9个啦！每个分部的活动区域不同，要求如下：

1. 点击某个分部的 tab，一顿筛选之后，点击下载，下次进来还能记住当前分部的选择
2. 切换到其他分部，再切换回来，当前 tab 页面的数据依然保留
3. 页面刷新，也能持久化
4. 4个 tab 都是如此

我百思不得其解，无奈请教导师，导师说可以啊，怎么就不可以呢？这跟筛选框的多少有啥关系呢？于是导师来一句：权限给我！竟然轻轻松松地解决了。

唉，技术不行，学习第一名，导师教的一定要变成自己的！走着！

一、页面基础数据准备

src/assets/baseData.js

export const beijing = ['密云区', '延庆区', '朝阳区', '丰台区', '海淀区']
export const shanghai = ['黄浦区', '徐汇区', '静安区', '虹口区', '长宁区']
export const shenzhen = ['南山区', '罗湖区', '宝安区', '龙岗区', '光明区']
export const wuhan = ['洪山区', '江夏区', '汉阳区', '武昌区', '青山区']
export const tabs = [
    { title: "北京分部", name: "1" },
    { title: "上海分部", name: "2" },
    { title: "深圳分部", name: "3" },
    { title: "武汉分部", name: "4" },
]
export const plans = [
    { plan: '活动A', type: 'A' },
    { plan: '活动B', type: 'B' },
    { plan: '活动C', type: 'C' },
]

二、页面基础数据渲染

App.vue

<template>
  <div class="myTabs" v-if="isShow">
    <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane
        v-for="item in tableTabs"
        :label="item.title"
        :key="item.name"
        :name="item.name"
      >
        <el-form ref="formRef" :model="formParams" label-width="80px">
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="formParams.date"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select
              v-model="formParams.region"
              placeholder="请选择活动区域"
              multiple
              collapse-tags
              clearable
            >
              <el-option
                v-for="item in areas"
                :label="item"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动方案">
            <el-checkbox-group v-model="formParams.type">
              <el-checkbox
                v-for="item in activePlans"
                :key="item.name"
                :label="item.plan"
                :name="item.type"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">下载</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import * as baseData from "./assets/baseData";
export default {
  data() {
    return {
      isShow: true,
      activeName: baseData.tabs[0].name,
      tableTabs: baseData.tabs,
      areas: baseData.beijing,
      activePlans: baseData.plans,
      formParams: {
        date: "",
        region: "",
        type: [],
      },
    };
  },
  methods: {
    tabClick() {},
    onSubmit() {},
    resetForm() {},
  },
};
</script>

三、实现 tab切换展示不同区域数据、以及重置功能

  methods: {
    // ◆ tab 切换
    tabClick() {
      if (this.activeName == "1") {
        this.areas = baseData.beijing;
      } else if (this.activeName == "2") {
        this.areas = baseData.shanghai;
      } else if (this.activeName == "3") {
        this.areas = baseData.shenzhen;
      } else {
        this.areas = baseData.wuhan;
      }
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
    // ◆重置
    resetForm() {
      this.formParams = {
        date: "",
        region: "",
        type: [],
      };
    }
  }

四、点击下载，配合 watch，使筛选框的数据持久化

  watch: {
    activeName: {
      handler(val) {
        // ◆从 localStorage 中取出数据
        const selectObj = window.localStorage.getItem(val);
        if (selectObj) {
          // 赋值给当前表单
          this.formParams = JSON.parse(selectObj);
        } else {
          // 清空表单
          this.resetForm();
        }
      },
      // ◆立即侦听(否则刷新数据就没了)
      immediate: true,
    },
  },
  methods: {
    // ◆ 下载
    onSubmit() {
      // 1.弹出下载成功的提示
      this.$message({
        message: "恭喜你，下载成功！",
        type: "success",
      });
      // 2.持久化，存到 localStorage 中
      const activeName = this.activeName;
      window.localStorage.setItem(activeName, JSON.stringify(this.formParams));
    },
  }

哎呀，学到了！学到了！