vant实现移动端渐变数据展示树

一 需求

要求是一个热点词的统计展示，中间是标题，两边是展现的词，点击词展开并展示相关内容，如图：

有点丑，这是ui还没确定样式的一个测试版，哈哈哈哈，莫笑话！

二 代码

html代码如下：

<template>
  <div class="select">
    <van-row class="select-content" type="flex" justify="center" gutter="5">
      <van-col span="10" class="select-left">
        <van-collapse
          v-model="activeNames"
          :class="`select-left-item select-left-item-${index}`"
          v-for="(item, index) in leftList"
          :key="index">
          <van-collapse-item :name="index" >
            <van-loading color="#0094ff" v-if="item.isLoading"/>
            <template  name="title" slot="title">
              <div @click="getList(item.id,index,'left')">{{item.name}}</div>
            </template>
            <van-cell-group v-for="(i, d) in item.list" :key="d" >
              <van-cell>
                <template #title>
                  <div class="van-ellipsis">{{ i.proposalTitle }}</div>
                </template>
              </van-cell>
            </van-cell-group>
            <div v-if="!item.isLoading">更多</div>
          </van-collapse-item> 
        </van-collapse>
        <div></div>
      </van-col>
      
      <div class="select-mid">委员关注热点词</div>

      <van-col span="10" class="select-right">
        <van-collapse
          v-model="activeNames0"
          :class="`select-right-item select-right-item-${index}`"
          v-for="(item, index) in rightList"
          :key="index">
          <van-collapse-item :name="index">
            <van-loading color="#0094ff" v-if="item.isLoading"/>
            <template  name="title" slot="title">
              <div @click="getList(item.id,index,'right')">{{item.name}}</div>
            </template>
            <van-cell-group v-for="(i, d) in item.list" :key="d">
              <van-cell>
                <template #title>
                  <div class="van-ellipsis">{{ i.proposalTitle }}</div>
                </template>
              </van-cell>
            </van-cell-group>
            <div v-if="!item.isLoading">更多</div>
          </van-collapse-item>
        </van-collapse>
      </van-col>
    </van-row>
  </div>
</template>

css样式代码如下：

因为两边展示的个数是一样的，所以每一个item绑定的class的颜色是写死的，如果有好的办法能够让颜色和个数都可以动态绑定的话，一定要告诉我，orz 求求惹！！！！！

<style scoped>
.select {
  width: 100%;
  height: 100%;
  /* padding: 10px 0; */
}
.select-content {
  width: 100%;
  height: 100%;
}
.select-left {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.select-left-item {
  height: auto;
  /* padding: 5px; */
  background-color: #b2bfca;
  text-align: center;
}
.select-mid {
  height: 100%;
  width: 40px;
  background-image: linear-gradient(#0179e9, #dfdfdf);
  color: #ffffff;
  font-size: 26px;
  font-weight: 600;
  word-wrap: break-word;
  /* letter-spacing: 20px; */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.select-right {
  display: flex;
  padding: 10px 0;
  flex-direction: column;
  justify-content: space-around;
}
.select-right-item {
  height: auto;
  /* padding: 5px; */
  background-color: #b2bfca;
  text-align: center;
}
</style>
<style lang="less">
.select-left-item-0 {
  .van-cell {
    background-color: #1890ff !important;
    padding: 2px 10px;
    color: #ffffff;
  }
}
.select-left-item-1 {
  .van-cell {
    background-color: #40a9ff !important;
    padding: 2px 10px;
    color: #ffffff;
  }
}
.select-left-item-2 {
  .van-cell {
    background-color: #69c0ff !important;
    padding: 2px 10px;
  }
}
.select-left-item-3 {
  .van-cell {
    background-color: #91d5ff !important;
    padding: 2px 10px;
  }
}
.select-left-item-4 {
  .van-cell {
    background-color: #bae7ff !important;
    padding: 2px 10px;
  }
}

.select-right-item-0 {
  .van-cell {
    background-color: #1890ff !important;
    padding: 2px 10px;
    color: #ffffff;
  }
}
.select-right-item-1 {
  .van-cell {
    background-color: #40a9ff !important;
    padding: 2px 10px;
    color: #ffffff;
  }
}
.select-right-item-2 {
  .van-cell {
    background-color: #69c0ff !important;
    padding: 2px 10px;
  }
}
.select-right-item-3 {
  .van-cell {
    background-color: #91d5ff !important;
    padding: 2px 10px;
  }
}
.select-right-item-4 {
  .van-cell {
    background-color: #bae7ff !important;
    padding: 2px 10px;
  }
}

.van-collapse-item__content {
  padding: 2px 0;
}
</style>

然后点击每一个item，因为每次点击后台都要跑算法，所以加载时间不能忽略，添加了vant的loading组件，

然后写的过程中我还遇到了一个问题就是在我没加loading的之前点击请求，接口请求完了但是视图没更新，只有下次再点击的时候菜展示我要展示的列表。

后来我在watch里添加了监听，显然，效果不太明显，我就去写loading，奇怪的是我写完loading以后，居然可以用了，不知道是谁的功劳。

接口请求后如图：

js代码：

export default {
  name: "SelectedTopicAssistant",
  data() {
    return {
      activeNames: [],
      activeNames0: [],
      leftList:[],
      rightList:[],
    };
  },
  components: {},
  watch: {
    leftList: function(n, o) {
      this.leftList = n
    }
  },
  created: function () {},
  mounted: function () {
      this.getHotWord()
  },
  methods: {
    getHotWord(){
        this.$http.post('/api').then(res=>{
            let data = res.data
            data.forEach((ele,index) => {
                //处理请求回来的数据，添加用来控制loading的字段
                ele.isLoading = true
                //分成左右两个列表，如果有更好的方法请一定要告诉我！！！！！
                if( index%2 == 0){
                    this.leftList.push(data[index])
                } else {
                    this.rightList.push(data[index])
                }
            });
        })
    },
    getList(id, index, list) {
      let formData = {
        proposals: JSON.stringify(id),
      };
      //这里的$qs是项目里封装好的处理数据格式的一个方法，看需求而定咯
      this.$http.post( "/api", this.$qs.stringify(formData) ) .then((response) => {
          let cellList = response.data.data.slice(0, 3);
          if(list == 'left'){
            //处理请求回来的数据，添加每一个item里要展示的数据列表
            this.leftList[index].list = cellList
            this.leftList[index].isLoading = false
          } else {
            this.rightList[index].list = cellList
            this.rightList[index].isLoading = false
          }
        });
    },
  },

最最最后边就是不落俗套的点击每一条数据查看详细内容，给列表添加一个点击方法就好了。

记录over ^-^。