iview下拉菜单树的iview-select-tree的使用以及iview-select-tree的实现的源代码

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的下拉菜单树的集成了。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页