iview下拉菜單樹的iview-select-tree的使用以及iview-select-tree的實現的源代碼

公衆號

大家可以直接微信掃描上面的二維碼關注我的公衆號，然後回覆【iview-select-tree】 裏面就會給到源代碼的下載地址，並定期在我的公衆號上給大家推送相應的技術文章，歡迎大家關注我的公衆號。

前言

最近遇到一個問題，希望在iview的下拉菜單中可以以樹形菜單的形式展示出來，可惜iview的作者並沒有在免費版本中給我們提供這麼一個功能，那麼這時候只能去網上尋找，可惜找了半天都是使用select和tree來實現的demo的例子，完全沒辦法用於生產環境，因此就自己就花了點時間基於iview寫了一個iview-select-tree來實現下拉菜單樹的組件，效果如下：

單選效果

多選效果

validate驗證效果

iview-select-tree的集成的npm的地址

https://www.npmjs.com/package/iview-select-tree

集成iview-select-tree

首先我們需要先創建一個我們的前端工程，那麼如何創建我們的前端工程大家可以直接訪問spring boot +iview 前後端分離架構之前端工程的構建【CMD版】，按照上述的步驟創建好以後，使用開發工具打開以後效果如下：

接着我們打開我們的package.json在裏面加入以下的兩個依賴：

    "iview": "^3.4.0",
    "iview-select-tree": "^1.0.4",

然後我們在執行以下命令來安裝我們的依賴：

cnpm install

打開我們的main.js將我們的iview引入，代碼如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

接着我們改造我們的app.vue頁面來展示我們的效果，代碼如下：

<template>
  <div id="app">
    <Modal v-model="showModal" title="驗證treeSelect插件" :loading="loading"  :mask-closable="false"  @on-ok="checkForm">
      <div>
        <Form ref="queryForm" :model="queryForm" :rules="queryFormRule" >
          <FormItem label="驗證treeSelect多選" prop="queryVal2">
            <selectTree v-model="queryForm.queryVal2" multiple :treeData="treeData"></selectTree>
          </FormItem>
          <FormItem label="驗證treeSelect單選" prop="queryVal1">
            <selectTree v-model="queryForm.queryVal1" clearable :treeData="treeData"></selectTree>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
    import selectTree from 'iview-select-tree'

    export default {
        name: 'App',
        components: {
            selectTree
        },
        data() {
            return {
                loading: true,
                showModal: true,
                queryForm: {
                    queryVal1: '',
                    queryVal2: []
                },
                queryFormRule: {
                    queryVal1: [
                        {required: true, message: '單選下拉框的值不能爲空', trigger: 'change'}
                    ],
                    queryVal2: [
                        {required: true, message: '多選下拉框的值不能爲空不能爲空', trigger: 'change', type: 'array'}
                    ]
                },
                treeData: [
                    {
                        title: '中國',
                        expand: true,
                        value: '1',
                        children: [
                            {
                                title: '福建',
                                expand: true,
                                value: '11',
                                children: [
                                    {
                                        value: '111',
                                        title: '寧德',
                                        expand: true,
                                        children: [
                                            {
                                                value: '111111',
                                                title: '福安'
                                            },
                                            {
                                                value: '2222222',
                                                title: '壽寧'
                                            },
                                            {
                                                value: '3333333',
                                                title: '周寧'
                                            }
                                        ]
                                    },
                                    {
                                        value: '112',
                                        title: '廈門'
                                    },
                                    {
                                        value: '1123',
                                        title: '福建'
                                    },
                                    {
                                        value: '1124',
                                        title: '泉州'
                                    },
                                    {
                                        value: '1125',
                                        title: '莆田'
                                    },
                                    {
                                        value: '1126',
                                        title: '三明'
                                    },
                                    {
                                        value: '1127',
                                        title: '龍巖'
                                    }
                                ]
                            },
                            {
                                title: '廣東',
                                value: '12',
                                expand: true,
                                children: [
                                    {
                                        value: '121',
                                        title: '廣州'
                                    },
                                    {
                                        value: '122',
                                        title: '深圳'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            checkForm() {
                this.$refs['queryForm'].validate((valid) => {
                    if (valid) {

                    }
                })
                setTimeout(() => {
                    this.loading = false
                    this.$nextTick(() => {
                        this.loading = true
                    })
                }, 1000)
            }
        }
    }
</script>

<style>

</style>

效果如下：

到此我們就完成了我們基於iview的iview-select-tree的下拉菜單樹的集成了。