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

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

先看效果图，如下所示：

1.引入TreeSelect 

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

Vue.use(TreeSelect);

2.代码实现

       

          大类
          
          
            

              取消
              确认
            
            
          
        

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）事件，切换左侧导航没有重置勾选的状态，因此我使用了一种笨方法，触发事件手动初始赋值。

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