移动端三级联动选择插件vue-pickers

首先上效果图

屏幕快照 2020-08-14 上午10.55.25.png

使用插件 vue-pickers

npm install vue-pickers -S

接下来直接上代码

<template>
    <div>
      <vue-pickers
        :data="pickData"
        @cancel="cancel"
        @confirm="confirm"
        @change="change"
        :showToolbar="true"
        :maskClick="true"
        :visible.sync="pickerVisible"
        :title="'所在机构'"
        :layer="3"
        :link="true"
        ></vue-pickers>

        <p>选中项</p>
        <p v-for="(item, index) in result" :key="index">{{ item.label }}</p>

        <button @click="pickerVisible=true;">打开</button>
    </div>
</template>

<script>

import vuePickers from 'vue-pickers'

export default {
  data () {
    let dataObj = 
      [
        {
          "label":"一级选项",
          "level": 1,
          "children":[
            {
              "label":"二级选项1",
              "level": 2,
              "children":[
                {
                  "label":"三级选项1",
                  "level": 3,
                },
                {
                  "label":"三级选项2",
                  "level": 3,
                },
                {
                  "label":"三级选项3",
                  "level": 3,
                },
                {
                  "label":"三级选项4",
                  "level": 3,
                },
              ]
            },
            {
              "label":"二级选项2",
              "level": 2,
              "children":[
                {
                  "label":"211",
                  "level": 3,
                },
                {
                  "label":"212",
                  "level": 3,
                },
                {
                  "label":"213",
                  "level": 3,
                },
              ]
            },
            {
              "label":"二级选项3",
              "level": 2,
              "children":[
              // {
                //   "label":"",
                //   "level": 3,
                // },
              ]
            },
          ]
        },
        {
          "label":"地球",
          "level": 1,
          "children":[
            {
              "label":"非洲",
              "level": 2,
              children: [
                {
                  "label":"印度",
                  "level": 3,
                },
                {
                  "label":"刚果",
                  "level": 3,
                }
              ],
            },
            {
              "label":"亚洲",
              "level": 2,
              children: [
                {
                  "label":"中国",
                  "level": 3,
                },
                {
                  "label":"大中华",
                  "level": 3
                }
              ],
            },
          ]
        },
      ]

    return {
      pickData: dataObj,
      result: [],
      pickerVisible: false
    }
  },
  components: {
    vuePickers
  },
  mounted(){
    console.log('pickData', this.pickData)
  },
  methods: {
    cancel(){
      console.log('cancel')
    },
    confirm(res){
      console.log('res', res)
      this.result = res
    },
    change(val){
      console.log(val)
    }
  }
}
</script>

总结：

使用过程中发现这款插件有个BUG,当数据层级不足三层时，如果已经选择了A,B,C三层，然后再次选择不足三层的数据D,E时，结果会显示D,E,C,
emmm，这样解释感觉不是很清晰，具体表现可以测下一级选项-二级选项3，我的解决方案是数据层级不足三级的时候给他强行塞满三级，label为空即可解决此问题。
如果有更好的解决方案或者思路，欢迎留言评论指正～～