Iview组件下拉框树形组件

iview官方示例

实现的效果

dropdown有个属性 transfer

是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false

赋值给它 false，这样不会因为失去焦点，而有部分内容会"消失"

我们观察iview给出的示例

<template>
    <Dropdown>
        <a href="javascript:void(0)">
            北京小吃
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem>豆汁儿</DropdownItem>
            <Dropdown placement="right-start">
                <DropdownItem>
                    北京烤鸭
                    <Icon type="ios-arrow-forward"></Icon>
                </DropdownItem>
                <DropdownMenu slot="list">
                    <DropdownItem>挂炉烤鸭</DropdownItem>
                    <DropdownItem>焖炉烤鸭</DropdownItem>
                </DropdownMenu>
            </Dropdown>
            <DropdownItem>冰糖葫芦</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</template>

我们可以发现Dropdown是下拉框未选择时的名字 DropdownMenu里有每个下拉框的子项DropdownItem 如果当某个下拉框的子项有子项时，这个下拉框的子项是Dropdown和DropDownItem组成，它的子项是由DropdownMenu和DropdownItem组成。 因此我们需要构造这样的层级关系。

我们需要写两个组件

1. 树结构组件
2. 递归组件(递归调用自己)

递归组件

树组件

<!-- 树节点的子节点 -->
<template>
    <div class="tree-view-item">
      <div v-for="node in parent" :key="node.id">
      // 当节点有孩子节点而且孩子节点的长度大于0 进行递归
        <div v-if="node.childColumn && node.childColumn.length > 0">
          <Dropdown :transfer="false" @on-click="handleClick" placement="right-start">
            <DropdownItem :name="node.columnTitle">
              {{node.columnTitle}}
            </DropdownItem>
            <DropdownMenu slot="list">
              <ColumnDropTree  :parent="node.childColumn"></ColumnDropTree>
            </DropdownMenu>
          </Dropdown>
        </div>
        <div v-else>
        // 否则不递归
          <DropdownItem :name="node.columnTitle">
            {{node.columnTitle}}
          </DropdownItem>
        </div>
      </div>
    </div>
</template>
<script>
import ColumnDropTree from './ColumnDropTree'
export default {
  name: 'ColumnDropTree',
  components: {
    ColumnDropTree
  },
  data () {
    return {
      parentName: '',
      childValue: ''
    }
  },
  props: {
    parent: Array
  },
  computed: {},
  methods: {
      // 上抛事件 把选中的值上抛给父组件
    handleClick (name) {
      this.childValue = name
      this.$emit('childByValue', this.childValue)
    }
  },
  watch: {
    parent (val) {
      console.log(parent)
    }
  },
  created () {
  },
  mounted () {}
}
</script>

<style>

</style>

我的github

github.com/zhangzhemin…

个人博客 zhangzheming.club/