|
@@ -1,92 +1,94 @@
|
|
|
<template>
|
|
|
- <van-tabs
|
|
|
- class="sidebar-container column"
|
|
|
- type="card"
|
|
|
- v-model="activeTab"
|
|
|
- :style="{ height }"
|
|
|
- :class="{
|
|
|
+ <div v-if="loaded">
|
|
|
+ <van-tabs
|
|
|
+ class="sidebar-container column"
|
|
|
+ type="card"
|
|
|
+ v-model="activeTab"
|
|
|
+ :style="{ height }"
|
|
|
+ :class="{
|
|
|
'default-sidebar-height': !height
|
|
|
}"
|
|
|
- swipe-threshold="99999"
|
|
|
- :lazy-render="lazyRender"
|
|
|
- :before-change="tabBeforeChange"
|
|
|
- >
|
|
|
- <van-tab
|
|
|
- v-for="(parent, index) in renderList"
|
|
|
- class="title-list"
|
|
|
- :class="{
|
|
|
+ swipe-threshold="99999"
|
|
|
+ :lazy-render="lazyRender"
|
|
|
+ :before-change="tabBeforeChange"
|
|
|
+ >
|
|
|
+ <van-tab
|
|
|
+ v-for="(parent, index) in renderList"
|
|
|
+ class="title-list"
|
|
|
+ :class="{
|
|
|
all: parent.level === 0,
|
|
|
parent: parent.level === 1
|
|
|
}"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <template #title>
|
|
|
- <div
|
|
|
- class="title-list-item"
|
|
|
- :class="{ all: parent.level === 0, level1: parent.level === 1 }"
|
|
|
- >
|
|
|
- <slot name="tab-item" :parent="parent">
|
|
|
- <div class="title-name">{{ parent.name }}</div>
|
|
|
- <div class="title-text">
|
|
|
- <slot name="tab-tag" :parent="parent">
|
|
|
- <van-tag
|
|
|
- round
|
|
|
- type="primary"
|
|
|
- v-if="index !== 0 && showParentCountTag(parent)"
|
|
|
- :class="{ visible: parent._children_selectedCount === 0 }"
|
|
|
- >
|
|
|
- {{ parent._children_selectedCount }}/{{
|
|
|
- parent._children_count
|
|
|
- }}
|
|
|
- </van-tag>
|
|
|
- </slot>
|
|
|
- </div>
|
|
|
- </slot>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <slot name="tab-content" :parent="parent" v-if="!!parent.hasThree"></slot>
|
|
|
- <template v-else>
|
|
|
- <van-cell-group class="content-list" :border="false">
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
<div
|
|
|
- class="content-list-item-container border-line-b"
|
|
|
- :class="{
|
|
|
+ class="title-list-item"
|
|
|
+ :class="{ all: parent.level === 0, level1: parent.level === 1 }"
|
|
|
+ >
|
|
|
+ <slot name="tab-item" :parent="parent">
|
|
|
+ <div class="title-name">{{ parent.name }}</div>
|
|
|
+ <div class="title-text">
|
|
|
+ <slot name="tab-tag" :parent="parent">
|
|
|
+ <van-tag
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ v-if="index !== 0 && showParentCountTag(parent)"
|
|
|
+ :class="{ visible: parent._children_selectedCount === 0 }"
|
|
|
+ >
|
|
|
+ {{ parent._children_selectedCount }}/{{
|
|
|
+ parent._children_count
|
|
|
+ }}
|
|
|
+ </van-tag>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <slot name="tab-content" :parent="parent" v-if="!!parent.hasThree"></slot>
|
|
|
+ <template v-else>
|
|
|
+ <van-cell-group class="content-list" :border="false">
|
|
|
+ <div
|
|
|
+ class="content-list-item-container border-line-b"
|
|
|
+ :class="{
|
|
|
all: child.level === 0,
|
|
|
child: child.level === 1 || child.level === 2
|
|
|
}"
|
|
|
- v-for="(child, index2) in parent.children"
|
|
|
- @click="childCellClick(parent, child)"
|
|
|
- v-show="showChildrenItem(parent, child, index2)"
|
|
|
- :key="index2"
|
|
|
- >
|
|
|
- <slot name="tab-group-item" :parent="parent" :child="child">
|
|
|
- <van-cell :class="{ 'active-cell': child._selected }" is-link>
|
|
|
- <template #title>
|
|
|
- <slot
|
|
|
- name="tab-group-item-title"
|
|
|
- :parent="parent"
|
|
|
- :child="child"
|
|
|
+ v-for="(child, index2) in parent.children"
|
|
|
+ @click="childCellClick(parent, child)"
|
|
|
+ v-show="showChildrenItem(parent, child, index2)"
|
|
|
+ :key="index2"
|
|
|
+ >
|
|
|
+ <slot name="tab-group-item" :parent="parent" :child="child">
|
|
|
+ <van-cell :class="{ 'active-cell': child._selected }" is-link>
|
|
|
+ <template #title>
|
|
|
+ <slot
|
|
|
+ name="tab-group-item-title"
|
|
|
+ :parent="parent"
|
|
|
+ :child="child"
|
|
|
>{{ child.name }}</slot
|
|
|
- >
|
|
|
- </template>
|
|
|
- <template #right-icon>
|
|
|
- <slot
|
|
|
- name="tab-group-item-right-icon"
|
|
|
- :parent="parent"
|
|
|
- :child="child"
|
|
|
- >
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template #right-icon>
|
|
|
+ <slot
|
|
|
+ name="tab-group-item-right-icon"
|
|
|
+ :parent="parent"
|
|
|
+ :child="child"
|
|
|
+ >
|
|
|
<span
|
|
|
class="j-icon checkbox"
|
|
|
:class="{ checked: child._selected }"
|
|
|
></span>
|
|
|
- </slot>
|
|
|
- </template>
|
|
|
- </van-cell>
|
|
|
- </slot>
|
|
|
- </div>
|
|
|
- </van-cell-group>
|
|
|
- </template>
|
|
|
- </van-tab>
|
|
|
- </van-tabs>
|
|
|
+ </slot>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ </template>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -191,6 +193,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ loaded: false,
|
|
|
activeTab: 0,
|
|
|
renderList: [],
|
|
|
sourceTemplate: {
|
|
@@ -213,6 +216,7 @@ export default {
|
|
|
* 初始化数据结构
|
|
|
*/
|
|
|
initSourceList(list = []) {
|
|
|
+ this.loaded = false
|
|
|
const uList = JSON.parse(JSON.stringify(list))
|
|
|
this.renderList = uList.map((parent) => {
|
|
|
// 一级菜单不需要 selected
|
|
@@ -254,6 +258,9 @@ export default {
|
|
|
return parent
|
|
|
})
|
|
|
this.refreshAllChildrenState()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.loaded = true
|
|
|
+ })
|
|
|
},
|
|
|
showParentCountTag(parent) {
|
|
|
if (this.showParentWhenChildrenEmpty) {
|