vue树形组件便捷写法

一、布局

<div id="realTime" class="container tab-pane fade cursor">
    <div v-for="(item,i) in realTimeData" :key="i">
        <div style="margin-left: 10px;" @click="expend(item.name)">
            <span v-if="isShow==item.name">-</span>
            <span v-else>+</span>
            {{item.name}}
        </div>
        <div style="margin-left: 20px;" v-show="isShow==item.name" v-for="(data,num) in item.data" :key="num">
          <div>{{data}}</div>
        </div>
    </div>
</div>

二、数据

isShow: "",
realTimeData: [
    {
        "name": "青海",
        "data": ["a", "b", "c", "d"]
    }, 
    {
        "name": "北京",
        "data": ["e", "f", "g", "h", "i", "j"]
    }, 
    {
        "name": "宁夏",
        "data": ["k", "l"]
        }
]

三、树根展开

expend(province) {
          if (province == this.isShow) {
            this.isShow = ""
          } else {
            this.isShow = province
          }
        }

基础样式