iView元件庫之下拉框dropdown(樹形結構)

chirstopther發表於2019-03-29
View元件

Iview元件下拉框樹形元件

iview官方示例

dropdown

實現的效果

效果

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/

相關文章