1、多级列表
2、展开缩起
3、效果图
截屏2021-07-06 下午1.53.51.png
代码如下：
<template>
<view class="content">
<checkbox-group @change="checkboxChange">
<scroll-view class="position-group" :style="getHeight()">
<!-- 一级循环 -->
<view class="pronames_one" v-for="(item, index) in positionlist" :key="index"
:class="item.curSelect?'oneshow':'onehide'">
<view class="pronames-one-label" @click="onelist(index)">
<view class="item-v">
<view v-if="getHasChildren(item[defaultKey.children])"
:class="item.curSelect?'iconfont icon-jian icon-v':'iconfont icon-ziyuan icon-v'">
</view>
<text>{{getTitle(item)}}</text>
<label :class="item.curSelect?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<checkbox class="t-v" v-if='getShowCheckbox(item)' :value="getItem(item)"
:checked="item.curSelect" style="transform:scale(0.85)" />
</view>
<!-- 二级循环 -->
<view class="pronames_two" v-for="(item2, index2) in item[defaultKey.children]" :key="index2"
:class="item2.curSelect?'twoshow':'twohide'">
<view class="pronames-two-label" @click="twolist(index,index2)">
<view class="item-v">
<view v-if="getHasChildren(item2[defaultKey.children])"
:class="item2.curSelect?'iconfont icon-jian icon-v':'iconfont icon-ziyuan icon-v'">
</view>
<text>{{getTitle(item2)}}</text>
<label :class="item2.curSelect?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<checkbox class="t-v" v-if='getShowCheckbox(item2)' :value="getItem(item2)"
:checked="item2.curSelect" style="transform:scale(0.85)" />
</view>
<!-- 三级循环 -->
<view class="pronames_three" v-for="(item3, index3) in item2[defaultKey.children]" :key="index3"
:class="item3.curSelect?'threeshow':'threehide'">
<view class="pronames_three-label" @click="threelist(index,index2, index3)">
<view class="item-v">
<view v-if="getHasChildren(item3[defaultKey.children])"
:class="item3.curSelect?'iconfont icon-jian icon-v':'iconfont icon-ziyuan icon-v'">
</view>
<text>{{getTitle(item3)}}</text>
<label :class="item3.curSelect?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<checkbox class="t-v" v-if='getShowCheckbox(item3)' :value="getItem(item3)"
:checked="item3.curSelect" style="transform:scale(0.85)" />
</view>
<view class="pronames_four" v-for="(item4, index4) in item3[defaultKey.children]"
:key="index4">
<!-- 4级循环 -->
<view class="pronames_four-label" @click="fourListClick(index,index2, index3, index4)">
<view class="item-v">
<text>{{getTitle(item4)}}</text>
<label :class="positionSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
</view>
<checkbox class="t-v" :value="getItem(item4)" :checked="item4.curSelect"
style="transform:scale(0.85)" />
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</checkbox-group>
<view class="bottom-v">
<button type="default" class="debtn-v" @click.stop="deleteBtn(positionlist)">清空</button>
<button type="primary" class="btn-v" @click.stop="surekBtn()">确定</button>
</view>
</view>
</template>
<script>
export default {
props: {
positionlist: {
type: Array,
default () {
return []
}
},
keyProps: {
type: Object,
default () {
return {}
}
}
},
data() {
return {
positionSele: true,
defaultKey: {
title: 'title',
value: 'id',
children: 'children'
},
selectList: []
}
},
mounted() {
for (let key in this.keyProps) {
this.defaultKey[key] = this.keyProps[key]
}
},
computed: {
getItem() {
return function(data) {
return JSON.stringify(data)
}
},
getHeight() {
return function() {
const systemInfo = uni.getSystemInfoSync()
let h = systemInfo.windowHeight - uni.upx2px(120)
return {
height: h
}
}
},
getTitle() {
return function(item) {
return item[this.defaultKey.title]
}
},
getShowCheckbox() {
return function(item) {
let chlidren = item[this.defaultKey.children]
if (chlidren && chlidren.length == 0) {
return true
}
}
},
getHasChildren() {
return function(data) {
if (data && data.length > 0) {
return true
}
return false
}
},
},
methods: {
checkboxChange(e) {
},
deleteBtn(dataList) {
for (let i = 0; i < dataList.length; i++) {
let data = dataList[I]
let children = data[this.defaultKey.children]
data.curSelect = false
if (children&&children.length > 0) {
this.deleteBtn(children)
}
}
},
findSelect(dataList) {
for (let i = 0; i < dataList.length; i++) {
let data = dataList[I]
let children = data[this.defaultKey.children]
if (data.curSelect && (!children || children.length == 0)) {
this.selectList.push(data)
}
else if (children&&children.length > 0) {
this.findSelect(children)
}
}
},
surekBtn() {
this.selectList = []
this.findSelect(this.positionlist)
// console.log('selectList', this.selectList)
this.$emit('selectEnd', this.selectList, this.positionlist)
// console.log('positionlist', this.positionlist)
},
onelist(index) {
let positionlist = this.positionlist;
if (!positionlist[index]['curSelect']) {
positionlist[index]['curSelect'] = true;
} else {
positionlist[index]['curSelect'] = false;
}
},
twolist(index, index2) {
let children = this.positionlist[index][this.defaultKey.children][index2]
let select = children['curSelect']
if (!select) {
children['curSelect'] = true;
} else {
children['curSelect'] = false;
}
},
threelist(index, index2, index3) {
let children = this.positionlist[index][this.defaultKey.children][index2][this.defaultKey.children][index3]
let select = children['curSelect']
if (!select) {
children['curSelect'] = true;
} else {
children['curSelect'] = false;
}
},
fourListClick(index, index2, index3, index4) {
let children = this.positionlist[index][this.defaultKey.children][index2][this.defaultKey.children][index3]
[this.defaultKey.children][index4]
let select = children['curSelect']
if (!select) {
children['curSelect'] = true;
} else {
children['curSelect'] = false;
}
}
}
}
</script>
<style>
page {
background: #fff;
}
.position-group {
width: 100%;
height: auto;
}
.icon-v {
padding: 0 10rpx 0 0rpx;
color: #F05B38;
}
.item-v {
display: flex;
flex-direction: row;
align-items: center;
}
.bottom-v {
background-color: #FFFFFF;
height: 100rpx;
border-top: 2rpx solid #E5E5E5;
position: fixed;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.debtn-v {
width: 160rpx;
line-height: 80rpx;
font-size: 26rpx;
}
.btn-v {
width: 60%;
line-height: 80rpx;
font-size: 26rpx;
}
/* 一级 */
.pronames_one {
width: 100%;
height: auto;
}
.pronames-one-label {
width: 100%;
height: 80rpx;
line-height: 80rpx;
background: #fff;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
border-bottom: 1px #eaeaea solid;
}
.pronames-one-label text {
font-size: 30rpx;
color: #2ebbfe;
color: #333333;
}
.pronames-one-label label {
color: #aaa;
font-size: 40rpx;
transition: all 0.5s;
}
/* 二级 */
.pronames_two {
width: 100%;
height: auto;
transition: all 0.5s;
}
.pronames-two-label {
margin-left: 40rpx;
width: calc(100% - 40rpx);
height: 80rpx;
line-height: 80rpx;
display: flex;
flex-direction: row;
box-sizing: border-box;
justify-content: space-between;
padding: 0 10rpx;
border-bottom: 1px #eee solid;
}
.pronames-two-label text {
font-size: 28rpx;
color: #666666;
/* margin-left: 40rpx; */
}
.pronames-two-label label {
color: #aaa;
font-size: 20px;
transition: all 0.5s;
}
/* 三级 */
.pronames_three {
width: 100%;
height: auto;
transition: all 0.5s;
}
.pronames_three-label {
margin-left: 80rpx;
width: calc(100% - 80rpx);
height: 80rpx;
line-height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
padding: 0 10rpx;
border-bottom: 1px #eee solid;
}
.pronames_three-label text {
font-size: 26rpx;
color: #666666;
/* margin-left: 80rpx; */
}
.pronames_three-label label {
color: #aaa;
font-size: 20px;
transition: all 0.5s;
}
/* .pronames_three-label label {
height: 90rpx;
line-height: 90rpx;
display: block;
color: #D5D5D5;
font-size: 20px;
} */
/* 三级 */
.pronames_four {
width: 100%;
height: auto;
}
.pronames_four-label {
margin-left: 120rpx;
width: calc(100% - 120rpx);
height: 80rpx;
line-height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 10rpx;
border-bottom: 1px #eee solid;
/* background-color: #007AFF; */
}
.pronames_four-label label {
/* width: 100%; */
height: 90rpx;
line-height: 90rpx;
display: block;
color: #D5D5D5;
font-size: 20px;
}
.pronames_four-label text {
/* width: 100%; */
font-size: 26rpx;
color: #666666;
/* margin-left: 80rpx; */
/* background-color: #007AFF; */
}
/* 展开收起效果 start */
.oneshow {}
.oneshow .pronames_two {
display: block;
}
.onehide {}
.onehide .pronames_two {
display: none;
}
/* 展开收起效果 end */
.twoshow {}
.twoshow .pronames_three {
display: block;
}
.twohide {}
.twohide .pronames_three {
display: none;
}
.threeshow {}
.threeshow .pronames_four {
display: block;
}
.threehide {}
.threehide .pronames_four {
display: none;
}
</style>
网友评论