问题

说明:这里使用计算属性获取thirdAllItems,这个得到的是所有的三级项指标。thirdCurrentItems是三级项的当前活动项,用于高亮。本来我还是想使用计算属性,如下代码去设置thirdCurrentItems,这个确实可以实现点击一级指标和二级指标的时候高亮联动得到的三级指标的第一项。但是我这里三级之后还有第四级,再单独点击三级指标的时候,计算属性thirdCurrentItemsset函数就不是那么好写了

     thirdCurrentItems: {
       get: function() {
         return this.thirdAllItems[0].ItemId
       }
     }

在这里插入图片描述

解决

thirdCurrentItems不写在计算属性了,使用watch监控thirdAllItems,以实现点击一二级的时候,高亮三级项的首项,在methods中的thirdItemClick函数设置this.thirdCurrentItems = id

  methods: {
    //点击三级标题
    thirdItemClick(id) {
      console.log(id)
      this.thirdCurrentItems = id
    }
  },
  computed: {
    // 三级项目录所有的数据
    thirdAllItems: function() {
      let self = this
      if (this.allData.Items) {
        return this.allData.Items.filter(function(val) {
          return val.ParentId == self.secondCurrentItems
        })
      } else {
        return {}
      }
    }
    // thirdCurrentItems: {
    //   get: function() {
    //     return this.thirdAllItems[0].ItemId
    //   }
    // }
  },
  watch: {
    thirdAllItems: function() {
      this.thirdCurrentItems=this.thirdAllItems[0].ItemId
    }
  },
Logo

前往低代码交流专区

更多推荐