vant表单使用TreeSelect 分类实现多选效果

目的：实现二级分类多选（一级分类下的二级菜单多选），把所选的值赋给表单。
背景：因项目选用vant，不想额外找其他的插件啦，发现vant中有TreeSelect 恰好也支持多选效果，以此文章来记录一下具体的实现过程。

先看效果图，如下所示：

1.引入TreeSelect 

import Vue from 'vue';
import { TreeSelect } from 'vant';

Vue.use(TreeSelect);

2.代码实现

<van-form ref="form">
       <div class="input-box">
          <span class="input-box_span">大类</span>
          <van-field
              readonly
              clickable
              :value="form.tag"
              placeholder="请选择大类"
              @click="getShowTag"
          />
          <van-popup v-model="showTag" position="bottom" :close-on-click-overlay="false">
            <div class="van-picker__toolbar">
              <button type="button" class="van-picker__cancel" @click="cancelTag">取消</button>
              <button type="button" class="van-picker__confirm" @click="confirmTag">确认</button>
            </div>
            <van-tree-select
                :items="items"
                :active-id.sync="items"
                :main-active-index.sync="activeIndex"
                @click-nav="onClickNav"
                @click-item="onClickItem"/>
          </van-popup>
        </div>
</van-form>

export default {
  data() {
    return {
      activeIndex: 0,
      form: {
        tag:'', // 大类
      },
       items:[
          {text:'颜色',
            children:[
                {id:'YS_1',text:'红色',isCheck:false},
                {id:'YS_2',text:'粉彩',isCheck:false}
            ]
          },
          {text:'玉翠',
             children:[
                {id:'YC_1',text:'哈哈',isCheck:false},
                {id:'YC_2',text:'单色',isCheck:false}
            ]
          }
        ],
      showTag:false, // 大类
      selectTagList:[], // 选中的二级分类
    };
  },
  methods: {
    getShowTag(){
      this.showTag = true
    },
    onClickNav(index) { // 点击触发左侧大类
      this.leftTagIndex = index
      let tagList = this.items
      // 切换左侧大类时，初始化选中状态
      tagList[index].children.forEach( tag => { 
        tag.isCheck = false
      });
      this.items = tagList
    },
    onClickItem(item) { // 点击触发大类右侧二级分类
      let index = this.leftTagIndex
      this.selectTagList = this.items[index].children
      // 切换勾选状态
      this.selectTagList.forEach( tag => {
        if (tag.id === item.id) {
          tag.isCheck = !item.isCheck
        }
      });
    },
    cancelTag(){ // 取消大类选择
      this.showTag = false
    },
    confirmTag(){ // 获取选中大类标签
      const checkedTags = this.selectTagList.filter(tag => tag.isCheck)
      let text = checkedTags.map( item => item.text)
      this.form.tag = text.join(',')
      this.showTag = false
    },
}
};

PS：看了vant官网只有点击左侧导航（click-nav）和点击右侧导航（click-item）事件，切换左侧导航没有重置勾选的状态，因此我使用了一种笨方法，触发事件手动初始赋值。

如有不足或者更好的方法欢迎大家留言，谢谢~~