基于vant的radio组件封装自己的级联组件

<template>
  <div class="demo">
    <div class="top">
      <ul>
        <li @click="one">回到顶级</li>
        <li v-for="item of parents" :key="item.value" @click="jump(item)">{{item.text}}</li>
      </ul>
      <van-button type="primary" @click="submit" size="mini">确定</van-button>
    </div>
    <van-radio-group v-model="radio">
      <div v-for="item of list" :key='item.value'>
        <van-radio :name="item.value"></van-radio><span @click="next(item)">{{item.text}}</span>
      </div>
    </van-radio-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: '',
      tree: [
        {
          value: '一级 1',
          text: '一级 1',
          children: [
            {
              value: '二级 1-1',
              text: '二级 1-1',
              children: [
                {
                  value: '三级 1-1-1',
                  text: '三级 1-1-1',
                  children: [
                    { value: '四级 1-1-1-1', text: '四级 1-1-1-1' },
                    { value: '四级 1-1-1-2', text: '四级 1-1-1-2' }
                  ]
                },
                { value: '三级 1-1-2', text: '三级 1-1-2' }
              ]
            },
            {
              value: '二级 1-2',
              text: '二级 1-2',
              children: [
                { value: '三级 1-2-1', text: '三级 1-2-1' },
                { value: '三级 1-2-2', text: '三级 1-2-2' }
              ]
            }
          ]
        },
        {
          value: '一级 2',
          text: '一级 2',
          children: [
            {
              value: '二级 2-1',
              text: '二级 2-1',
              children: [
                { value: '三级 2-1-1', text: '三级 2-1-1' },
                { value: '三级 2-1-2', text: '三级 2-1-2' }
              ]
            },
            { value: '二级 2-2', text: '二级 2-2' }
          ]
        },
        {
          value: '一级 3',
          text: '一级 3',
          children: [
            { value: '二级 3-1', text: '二级 3-1' },
            { value: '二级 3-2', text: '二级 3-2' }
          ]
        }
      ],
      list: [], // 本级节点
      parents: [] // 所有的父级节点
    }
  },
  created() {
    this.list = this.tree
  },
  methods: {
    submit() {
      console.log('选中的节点', this.radio)
    },
    one() {
      this.list = this.tree
      this.parents = []
      this.radio = ''
    },
    jump(item) {
      console.log(item.children, this.list)
      if (JSON.stringify(item.children) !== JSON.stringify(this.list)) {
        this.radio = ''
        this.list = item.children
        // 设置面包屑导航
        const parents = this.getParents(this.tree, item.value)
        this.parents = parents.reverse()
      } else {
        alert('当前已经是' + item.text)
      }
    },
    next(item) {
      if (item.children) {
        this.radio = ''
        this.list = item.children
        const parents = this.getParents(this.tree, item.value)
        this.parents = parents.reverse()
      } else {
        alert('已经是最后一级')
      }
    },
    // 找到所有父级
    getParents(tree, value) {
      for (const item of tree) {
        if (item.value === value) return [item]
        if (item.children) {
          const node = this.getParents(item.children, value)
          if (node !== undefined) return node.concat(item)
        }
      }
    }
  }
}
</script>
<style lang="less">
.demo {
  .top {
    display: flex;
    justify-content: space-between;
    > ul {
      display: flex;
      li {
        font-size: 10px;
        margin-right: 10px;
      }
    }
  }
  .van-radio-group {
    > div {
      > .van-radio {
        display: inline-block;
      }
    }
  }
}
</style>

 

1、点击节点跳转至下一级节点

2、点击节点前的radio可以选中当前节点，点击确定打印节点value

3、点击面包屑可以回到上级或上上级或顶级节点