计算属性

112 阅读1分钟
<template>
  <div>
    <ul class="filter-wrapper">
      <li @click="nameClick">{{ name }}</li>
      <li @click="yearClick">{{ year }}</li>
      <li @click="subjectClick">{{ subject || '不限' }}</li>
    </ul>
<!--    <s-van-popup v-model="showDialog" :objArr="filterData"></s-van-popup>-->
    <van-popup v-model="isShow" style="width: 200px; height: 200px; border: 1px solid red;">
      <ul>
        <li @click="itemClick(getSortYear(index, filterData['北京']))" v-for="(item, index) in filterData['北京']">{{getSortYear(index, filterData['北京'])}}</li>
      </ul>
    </van-popup>
  </div>
</template>
<script>
import Vue from 'vue';
import { Popup } from 'vant';
import table from "@/views/category/table";

Vue.use(Popup);
export default {
  data() {
    return {
      name: '',
      year: '',
      subject: '',
      showDialog: false,
      showDialog1: false,
      isShow: false,
      tag: 1
    }
  },
  props: ["filterData"],
  components: {

  },
  mounted() {

  },
  computed: {
    getSortYear() {
      let that = this;
      return function (key, filterData) {
        if (that.tag !== 1) {
          return key
        }
        let size = Object.keys(filterData).length
        let index = Object.keys(filterData).indexOf(key)
        return Object.keys(filterData)[size - index - 1]
      }
    }
  },
  methods: {
    nameClick() {
      this.isShow = true;
      this.tag = 0;
    },
    yearClick() {
      this.isShow = true;
      this.tag = 1;
    },
    subjectClick() {
      this.isShow = true;
      this.tag = 2;
    },
    itemClick(i) {
      switch(this.tag){
        case 0:
          this.name = i;
          this.year = Object.keys(this.filterData[i])[Object.keys(this.filterData[i]).length - 1]
          this.subject = Object.keys(this.filterData[i][this.year])[0]
          break;
        case 1:
          this.year = i;
          this.subject = Object.keys(this.filterData[this.name][this.year])[0]
          break;
        case 2:
          this.subject = i;
          break
      }
      this.$emit("itemClick", this.name, this.year, this.subject)
    }
  }
}
</script>
<style scoped>
.filter-wrapper li {
  display: inline-block;
  width: 100px;
  height: 40px;
  border: 1px solid red;
}
</style>