级联选择组件
新建组件-子项
- CasadeSelect/CasadeSelectItem.vue
<template>
<div class="container-list-item">
<div class="icon">
<div class="checkbox">
<svg-icon v-if="curChecked" icon-class="radio" @click.stop="clickBox(false, item)" />
<van-icon v-else name="circle" @click.stop="clickBox(true, item)" />
</div>
</div>
<div class="info">
<div class="word text-cut">{{ item[sLabel] }}</div>
<div v-if="hasChildren" class="right blue" @click="clickItem($event, item)">
<van-icon name="cluster-o" />
下级
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CasadeSelectItem',
props: {
// 传入的数值
item: {
type: Object,
default: () => {}
},
// 是否选中状态
checked: {
type: Boolean,
default: false
},
// 是否只能选择叶子结点
nodes: {
type: Boolean,
default: false
},
// 列名称对照表
comparison: {
type: Object,
default: () => {
return {
value: 'value', // 选中值
label: 'label', // 显示名称
children: 'children' // 子级名称
}
}
}
},
data() {
return {
sLabel: this.comparison.label ? this.comparison.label : 'label', // label值名称
sChildren: this.comparison.children ? this.comparison.children : 'children', // children值名称
curChecked: this.checked //是否选中状态
}
},
computed: {
/**
* 是否包含子级
*/
hasChildren: function () {
return this.item ? (this.item[this.sChildren] ? this.item[this.sChildren].length > 0 : false) : false
}
},
watch: {
// 监听列名对照表变化
comparison: {
handler() {
this.sLabel = this.comparison.label ? this.comparison.label : 'label'
this.sChildren = this.comparison.children ? this.comparison.children : 'children'
},
deep: true
},
// 是否选中状态
checked: function (val) {
this.curChecked = val
}
},
methods: {
/** 点击当前项的执行方法
*/
clickItem: function (e, item) {
this.$emit('clickItem', item, this.hasChildren)
// 不包含下一级，修改check值事件
if (!this.hasChildren && this.isCheck) {
this.clickBox(e)
}
},
/**
* 点击单选框或复选框
*/
clickBox: function (checked) {
this.curChecked = !this.curChecked
this.$emit('change', checked)
}
}
}
</script>
<style lang="less" scoped>
@import './index';
</style>
新建组件-面包屑
CasadeSelect/CasadeSelectNavigation.vue
<template>
<div class="title">
<div ref="sea" class="flex nav">
<!-- 全部 -->
<div class="inline-item" @click="clickItem(null, -1)">
<span v-if="!isre && treeStack.length == 0" class="none">全部</span>
<span v-else class="active">全部</span>
</div>
<!-- 全部 -->
<!-- 搜索结果 -->
<div v-if="isre" @click="clickItem(null, -2)" class="inline-item" :class="activeSearch ? 'active' : 'none'">
<van-icon name="arrow" class="gray-6" />
搜索结果
</div>
<!-- 搜索结果 -->
<!-- 当前树的层级值 -->
<div v-for="(item, index) in treeStack" class="inline-item" :key="index">
<div class="inline-item" @click="clickItem(item, index)">
<van-icon name="arrow" class="gray-6" />
<span v-if="index == treeStack.length - 1" class="none inline-item">
{{ item[slabel] }}
</span>
<span v-else class="active">
{{ item[slabel] }}
</span>
</div>
</div>
<!-- 当前树的层级值 -->
</div>
</div>
</template>
<script>
export default {
name: 'CasadeSelectNavigation',
props: {
// 显示的label值
slabel: {
type: String,
default: 'label'
}
},
data() {
return {
isre: false, // 是否进行了搜索(返回是否进行了搜索)
treeStack: [] // 当前搜索值
}
},
computed: {
// 是否可点击搜索结果
activeSearch: function () {
return this.treeStack.length > 0
}
},
created: function () {
// 浅拷贝导航列表的每一个对象（为了不改变item值，也不复制过多的数据）
this.treeStack.forEach(item => {
var tempItem = Object.assign(item)
this.treeStack.push(tempItem)
})
var obj = {
setIsre: this.setIsre,
getIsre: this.getIsre,
setTreeStack: this.setTreeStack,
concatTreeStack: this.concatTreeStack,
pushTreeStack: this.pushTreeStack,
clearTreeStack: this.clearTreeStack,
getTreeStack: this.getTreeStack
}
this.$emit('inF', obj) // 导出的导航栏调用方法
},
methods: {
/** 设置isre值(是否搜索)
*/
setIsre: function (isre) {
this.isre = isre
},
/**
* 获取isr值（获取是否搜索中）
*/
getIsre: function () {
return this.isre
},
/** 设置导航树
*/
setTreeStack: function (treeStack) {
this.treeStack = treeStack
},
/** 拼接导航树
*/
concatTreeStack: function (treeStack) {
this.treeStack = this.treeStack.concat(treeStack)
},
/** 为导航树添加项
*/
pushTreeStack: function (item) {
this.treeStack.push(item)
},
/**
* 获取当前导航条
*/
getTreeStack: function () {
return this.treeStack
},
/**
* 清空导航树
*/
clearTreeStack: function () {
this.treeStack.splice(0)
},
/** 点击导航栏索引
*/
clickItem(item, index) {
if (index == -1) {
// 点击全部
this.isre = false
this.treeStack.splice(0)
} else if (index == -2) {
// 搜索结果
if (this.activeSearch) {
this.isre = true
this.treeStack.splice(0)
}
} else {
// 点击某一层级树
this.isre = false
if (this.treeStack.length - 1 > index) {
this.treeStack.splice(index + 1)
}
}
this.$emit('clickItem', item, index)
}
}
}
</script>
<style lang="less" scoped>
.inline-item {
color: #011b4c;
}
.nav {
width: 100%;
white-space: nowrap;
overflow: auto;
}
.active {
color: #0056fb;
}
</style>
新建组件-搜索
CasadeSelect/CasadeSelectSearch.vue
<template>
<div>
<!-- 输入框内容 -->
<van-search
class="text"
type="text"
v-model="inputVal"
confirm-type="搜索"
placeholder="请输入"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
@search="handleFllter"
@clear="clears"
/>
</div>
</template>
<script>
export default {
name: 'CasadeSelectSearch',
data() {
return {
inputVal: '' // 输入内容
}
},
methods: {
/** 输入框变化时方法
*/
handleInput() {
this.$emit('input', this.inputVal)
},
/** 输入框聚焦时触发
*/
handleFocus() {
this.$emit('focus', this.inputVal)
},
/** 输入框失去焦点时触发
*/
handleBlur() {
this.$emit('blur', this.inputVal)
},
/** 提交内容时触发
*/
handleFllter() {
this.$emit('confirm', this.inputVal)
},
/**
* 清空输入框内容
*/
clears: function () {
this.inputVal = ''
this.$emit('clear', this.inputVal)
}
}
}
</script>
<style lang="less" scoped>
.filterBox {
padding: 15px 32px;
.filter-input {
height: 80px;
display: flex;
align-items: center;
padding-left: 40px;
.filterImg {
width: 32px;
height: 32px;
margin-right: 20px;
margin-bottom: 5px;
}
.filterImgs {
width: 32px;
height: 32px;
}
.text {
width: 100%;
font-size: 32px;
color: #000;
}
}
}
// 添加左侧padding(用于扩大图标范围)
.padding-left-sm {
padding-left: 20px;
}
</style>
新建组件-index
- CasadeSelect/index.vue
<template>
<div>
<!-- 搜索框 -->
<div class="header">
<!-- 搜索栏 -->
<casade-select-search @confirm="confirmSearch" />
<!-- 面包屑导航 -->
<casade-select-navigation :slabel="props.label" ref="navigation" @inF="navigationInt" @clickItem="backTree" />
</div>
<!-- 列表 -->
<div>
<div class="container-list">
<casade-select-item
v-for="(item, index) in tree"
:key="index"
:item="item"
:checked="newCheckList.includes(item.id)"
:nodes="props.nodes"
:comparison="comparison"
@clickItem="toChildren"
@change="checked => radioChange(checked, item, index)"
/>
</div>
</div>
<!-- 确定按钮 -->
<div class="padding-lr-sm padding-tb-sm">
<van-button block round class="sureBtn" type="info" @click="backConfirm">确认</van-button>
</div>
</div>
</template>
<script>
import { Toast } from 'vant'
import CasadeSelectSearch from './CasadeSelectSearch'
import CasadeSelectItem from './CasadeSelectItem'
import CasadeSelectNavigation from './CasadeSelectNavigation'
export default {
name: 'CasadeSelect',
components: { CasadeSelectSearch, CasadeSelectItem, CasadeSelectNavigation },
props: {
// 传入的树形结构数据，每个对象必须包含唯一的id值
trees: {
type: Array,
default: () => {
return []
}
},
// 选中列表
checkList: {
type: Array,
default: () => []
},
// 父级列表
parentList: {
type: Array,
default: () => []
},
// 树的属性参数
props: {
type: Object,
default: () => {
return {
id: 'id',
label: 'name',
children: 'children',
checkStrictly: false, //不关联
nodes: false // nodes为false时，可以选择任意一级选项；nodes为true时只能选择叶子节点
}
}
},
/**
* 是否懒加载树的值
*/
stepReload: {
type: Boolean,
default: false
},
// 每次循环加载的item的数据量
pageSize: {
type: Number,
default: 50
}
},
data() {
return {
// 导航条
setIsre: null, // 导航条方法 - 设置是否搜索中方法
getIsre: null, // 获取是否搜索中
setTreeStack: null, // 导航条 - 设置导航
concatTreeStack: null, // 导航条 - 拼接当前导航对象
clearTreeStack: null, // 导航条- 清空导航条
getTreeStack: null, // 导航条 - 获取导航条
itemsLoading: false, // item是否在循环渲染中
itemsStop: false, // 是否终止其他渲染
tree: [], // 默认数组
newNum: 0,
oldNum: 0,
allData: this.trees,
parent_data: this.parentList || [], //选择父辈
searchResult: [],
newCheckList: this.checkList,
nodePathArray: [], // 当前展示的路径
// item名称对照表
comparison: {
value: this.props.id ? this.props.id : 'id', // 选中值名称
label: this.props.label ? this.props.label : 'name', // 显示名称
children: this.props.children ? this.props.children : 'children' // 子集名称
}
}
},
watch: {
checkList() {
this.newCheckList = this.checkList
this.setSelected()
},
// 监听数据值的变化
trees(val, oldval) {
if (val != oldval) {
var tree_stack = this.getTreeStack()
this.allData = val // 重新加载所有树
// 重新加载当前树
if (!Array.isArray(tree_stack)) {
this.loadTree(val)
return
}
var length = tree_stack.length
if (length === 0) {
if (typeof this.getIsre === 'function') {
if (this.getIsre()) {
return
}
}
this.loadTree(val)
} else {
let tempArray = val // 存储当前值
let children = this.props.children
for (var i = 0; i < length; i++) {
var tempObject = tempArray.find(item => {
return tree_stack[i].Value == item.Value
})
if (tempObject) {
tempArray = tempObject[children]
} else {
// 跳转到全部
break
}
if (i == length - 1) {
this.loadTree(tempArray)
}
}
}
}
},
// 树的属性对照参数
props: {
handler: function () {
this.comparison.value = this.props.id ? this.props.id : 'id'
this.comparison.label = this.props.label ? this.props.label : 'name'
this.comparison.children = this.props.children ? this.props.children : []
},
deep: true
}
},
created: function () {
this.loadTree(this.trees)
},
// 实例被挂载后调用
mounted() {},
methods: {
/*
* 默认选中
* */
setSelected() {
// 初始化选中项
this.$nextTick(() => {
let children = this.props.children
if (this.newCheckList.length > 0) {
this.getNodeRoute(this.allData, this.newCheckList[0])
let arr = this.nodePathArray.reverse()
if (arr.length == 0) {
return
}
this.concatTreeStack(arr) // 获取导航条的值
var tree_stack = this.getTreeStack()
var data = tree_stack[tree_stack.length - 1][children] ? tree_stack[tree_stack.length - 1][children] : []
this.loadTree(data)
}
})
},
/** 初始化导航条的方法
*/
navigationInt(e) {
this.setIsre = e.setIsre
this.getIsre = e.getIsre
this.concatTreeStack = e.concatTreeStack
this.pushTreeStack = e.pushTreeStack
this.clearTreeStack = e.clearTreeStack
this.getTreeStack = e.getTreeStack
},
/**单选
*/
radioChange: function (checked, item, index) {
let id = this.props.id
if (checked) {
// 选中当前对象
this.newCheckList = []
this.newCheckList.push(this.tree[index][id])
} else {
// 移除其他对象
var nIndex = this.newCheckList.indexOf(item[id])
this.newCheckList.splice(nIndex, 1)
}
this.$emit('change', this.newCheckList)
},
/**
* @param {Array} tree 目标树
* @param {Object} targetId 为目标节点id
*/
getNodeRoute(tree, targetId) {
let children = this.props.children
let id = this.props.id
for (let index = 0; index < tree.length; index++) {
if (tree[index][children]) {
if (tree[index][children]) {
let endRecursiveLoop = this.getNodeRoute(tree[index][children], targetId)
if (endRecursiveLoop) {
this.nodePathArray.push(tree[index])
return true
}
}
}
if (tree[index][id] === targetId) {
return true
}
}
},
/**跳转到子级
*/
toChildren(item, realHasChildren) {
this.$emit('clickItem', item, realHasChildren) // 点击导航栏事件
// 不包含子级,不执行任何操作
if (!realHasChildren) {
return
}
// 点击跳转下一级
let children = this.props.children // 子级名称
// 将当前item加入到导航列表
if (item[children].length > 0) {
this.loadTree(item[children])
this.pushTreeStack(item) // 添加导航
}
},
/** 返回到其他树层
*/
backTree(item, index) {
this.$emit('backTree', item, index)
let that = this
if (index == -1) {
// 全部
that.loadTree(that.allData)
} else if (index == -2) {
// 搜索
that.loadTree(that.searchResult) // 搜索结果
} else {
// 其他层级
that.loadTree(item[that.props.children]) // tree的其他层级
}
},
/**
/** 搜索提交方法
*/
confirmSearch(val) {
this.searchResult = []
// 查找
this.$tips.loading('搜索中...')
this.search(this.allData, val)
// 返回搜索结果
Toast.clear()
this.setIsre(true) // 设置导航条为搜索状态
this.clearTreeStack() // 清空导航条
this.loadTree(this.searchResult)
},
/**搜索方法
*/
search(data, keyword) {
var that = this
let children = that.props.children
for (var i = 0, len = data.length; i < len; i++) {
// try-catch(try-catch) - 没有label列，跳过继续执行
try {
if (data[i][that.props.label].indexOf(keyword) >= 0) {
that.searchResult.push(data[i])
}
if (data[i][children]) {
if (data[i][children].length > 0) {
that.search(data[i][children], keyword)
}
}
} catch (e) {
console.warn(e)
}
}
},
/**
* 点击确认按钮执行事件
*/
backConfirm() {
this.$emit('sendValue', this.newCheckList, 'back')
},
/**加载Tree值
*/
loadTree(datas, start = 0) {
let that = this
if (!this.stepReload) {
// 不进行多次渲染加载
that.tree = datas
} else {
// datas为null, 不进行渲染
if (!Array.isArray(datas)) {
that.tree = datas
return
} else if (datas.length === 0) {
that.tree = datas
return
}
// 进行多次渲染加载
if (start === 0) {
// 终止其他渲染
if (that.itemsLoading) {
that.itemsStop = true //终止其他Item渲染
}
// 首次加载提醒
this.$tips.loading()
that.tree = []
that.itemsLoading = true
}
var length = datas.length
var end = Math.min(start + that.pageSize, length)
var tempArray = datas.slice(start, end)
that.tree = that.tree.concat(tempArray)
that.$nextTick(function () {
if (start == 0) {
Toast.clear()
that.itemsStop = false
}
if (end < length && !that.itemsStop) {
that.loadTree(datas, end)
} else {
that.itemsLoading = false
}
})
}
}
}
}
</script>
<style lang="less" scoped>
@import 'index.less';
</style>
新建样式-index.less
- CasadeSelect/index.less
.flex_between_center {
display: flex;
justify-content: space-between;
align-items: center;
}
.checkbox {
position: relative;
height: 18px;
margin-left: 5px;
margin-right: 0px;
width: 18px;
.color {
color: #0056fb;
background-color: #0056fb;
}
.txt {
// font-size: 15px;
line-height: 18px;
width: 100%;
height: 100%;
display: flex;
}
}
.checkBorder {
border: 1px solid #ecdee4;
}
.header {
width: 100%;
//position: fixed;
background-color: #fff;
z-index: 9999;
.title {
height: 45px;
padding: 0 16px;
line-height: 45px;
font-size: 15px;
background-color: #f5f5f5;
color: #606064;
.iconclass {
display: inline-block;
margin: 0 6px;
color: #D0D4DB;
font-size: 14px;
}
}
}
.container-list {
overflow-y: scroll;
overflow-x: hidden;
.common {
background-color: #fff;
border-bottom: 1px solid #f4f4f4;
padding-left: 5px;
.content {
display: flex;
align-items: center;
min-height: 30px;
width: 100%;
padding: 8px 0;
position: relative;
font-size: 16px;
.right {
position: absolute;
right: 15px;
color: #babdc3;
font-size: 16px;
}
}
}
}
.active {
color:#0056fb !important;
}
.none {
color: #666666;
}
.icon-selected{
color: #0056fb!important;
font-size: 20px!important;
}
.icons{
color: #0056fb!important;
font-size: 20px!important;
}
.inline-item {
display: inline-block
}
.content-item{
display: flex;
position: relative;
align-items: center;
}
.box_sizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn {
//position: fixed;
bottom: 0;
padding: 5px;
background-color: #fff;
width: 100%;
.sureBtn {
background-color: #0056fb;
color: #fff;
}
}
.container-list-item {
display: flex;
font-size: 14px;
align-items: center;
width: calc(100% - 20px);
margin: 0 10px ;
padding: 10px 0;
border-bottom: 1px solid #D9DDE4;
.icon {
font-size: 17px;
}
.info {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
white-space: nowrap;
margin-left: 10px;
}
// item的数字样式
.word {
font-size: 15px;
color: #5b5757;
width: 100%;
word-break: break-all;
}
}
.container-list {
height: 40vh;
}
调用组件
<template>
<div>
<div class="value" @click="showPicker = true" :class="fieldValue ? 'black' : 'gray-6'">
{{ fieldValue ? fieldValue : '请选择' }}
</div>
<van-popup get-container="body" v-model="showPicker" round position="bottom" safe-area-inset-bottom>
<van-cascader
v-model="cascaderValue"
title="所属部门"
:options="options"
@close="showPicker = false"
@finish="onFinish"
/>
</van-popup>
</div>
</template>
<script>
export default {
name: 'CascaderPicker',
data() {
return {
showPicker: false,
fieldValue: '',
cascaderValue: '',
// 选项列表，children 代表子选项，支持多级嵌套
options: []
}
},
methods: {
// 全部选项选择完毕后，会触发 finish 事件
onFinish({ selectedOptions }) {
this.showPicker = false
this.fieldValue = selectedOptions.map(option => option.text).join('/')
}
}
}
</script>