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