You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
2.9 KiB
164 lines
2.9 KiB
<template>
|
|
<scroll-view
|
|
:scroll-x="true"
|
|
:scroll-y="true"
|
|
:scroll-left="scrollLeft"
|
|
:scroll-top="scrollTop"
|
|
>
|
|
<view class="list-view">
|
|
<view class="show-view first-view">
|
|
<view
|
|
v-for="item in listReal"
|
|
:key="item.value"
|
|
class="show-view-item"
|
|
:class="{ selected: item.isSel }"
|
|
@click="handleClick(item)"
|
|
>
|
|
{{ item[useName] }}
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
v-for="(item, index) in listArray"
|
|
:key="index"
|
|
class="show-view second-view"
|
|
>
|
|
<after-select
|
|
v-if="item.length"
|
|
:list="item"
|
|
:index="index"
|
|
:use-name="useName"
|
|
@click="childClick"
|
|
></after-select>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import AfterSelect from './after-select';
|
|
export default {
|
|
components: { AfterSelect },
|
|
props: {
|
|
|
|
list: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
useName: {
|
|
type: String,
|
|
default: 'label'
|
|
}
|
|
},
|
|
emits: ['click'],
|
|
data() {
|
|
return {
|
|
listReal: [], // 第一列数组
|
|
listArray: [], // 第二列及之后数组
|
|
selectedArray: [], // 选中内容数组
|
|
scrollLeft: 0, // 滑动距离
|
|
scrollTop: 0 // 距离顶部距离
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.listReal = this.list;
|
|
this.listReal.map(i => {
|
|
i.isSel = false;
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
handleClick(item) {
|
|
this.listReal.forEach(i => {
|
|
i.isSel = false;
|
|
});
|
|
item.isSel = true;
|
|
|
|
this.selectedArray.splice(0);
|
|
this.selectedArray.push(item);
|
|
this.listArray.splice(0);
|
|
|
|
this.common(item.children);
|
|
},
|
|
|
|
childClick(item, index) {
|
|
this.listArray.splice(index);
|
|
this.selectedArray.splice(index, 99, item);
|
|
|
|
this.common(item.children, index);
|
|
},
|
|
|
|
common(data, index) {
|
|
this.scrollTop === 0
|
|
? (this.scrollTop = 0.1)
|
|
: (this.scrollTop = 0);
|
|
|
|
if (data && data.length) {
|
|
data.forEach(i => {
|
|
this.$set(i, 'isSel', false);
|
|
});
|
|
this.listArray.push(data);
|
|
} else {
|
|
this.$emit('click', this.selectedArray);
|
|
}
|
|
|
|
if (!index) return;
|
|
this.$nextTick(() => {
|
|
this.scrollLeft = 250 * index;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
scroll-view {
|
|
white-space: nowrap;
|
|
height: 40vh;
|
|
border: solid 1px #ebebeb;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.list-view {
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
min-height: 100%;
|
|
|
|
.show-view {
|
|
min-width: calc((100% - 1px) / 3);
|
|
border-right: solid 1px #ebebeb;
|
|
|
|
&:first-child{
|
|
width:30%
|
|
}
|
|
&.second-view {
|
|
border: 0;
|
|
width:70%;
|
|
height:40vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&-item {
|
|
height: 80rpx;
|
|
padding: 0 13rpx 0 40rpx;
|
|
line-height: 80rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.first-view {
|
|
background-color: $uni-bg-color-grey;
|
|
}
|
|
|
|
.selected {
|
|
color: $uni-color-primary;
|
|
background-color: $uni-bg-color;
|
|
}
|
|
}
|
|
</style>
|