chaochao_lz
chaochao_lz
  • 发布:2023-01-04 10:16
  • 更新:2023-01-04 10:16
  • 阅读:363

【报Bug】树形组件,递归子节点时,子节点中的插槽,在H5中正常,微信小程序中不正常

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 专业版

第三方开发者工具版本号: 1.06.2212011win32-x64

基础库版本号: 3.0.0-3061520221228001

项目创建方式: CLI

CLI版本号: 无,直接gitee下载的项目

示例代码:

ui-tree.vue

<template>  
  <view class="je-tree">  
    <UiTreeItem v-for="(item, index) in root.children" :key="index" :data="item">  
      <template #default="{ record }">  
        <slot name="item" :record="record"></slot>  
      </template>  
    </UiTreeItem>  
  </view>  
</template>  
<script>  
  import UiTreeItem from './ui-tree-item.vue';  
  import { provide, reactive } from 'vue';  
  export default {  
    name: 'UiTree',  
    options: { styleIsolation: 'shared' },  
    components: {  
      UiTreeItem,  
    },  
    props: {  
      indent: { type: Number, default: 10 }, // 缩进  
      data: [Array, Object], // 数据  
    },  
    setup(props) {  
      const root = reactive({ id: 'ROOT', children: props.data }); // 根节点  
      provide('je-tree-context', {  
        props,  
      });  
      return { root };  
    },  
  };  
</script>  
<style lang="scss">  
  .je-tree {  
    display: flex;  
    flex-direction: column;  
    flex: 1;  
    overflow: hidden;  
  }  
</style>  

ui-tree-item.vue

<template>  
  <!-- 树形节点 -->  
  <view class="je-tree-item" :class="{ 'is-folder': isFolder, 'is-expanded': isExpanded }">  
    <!-- 展开图标 -->  
    <view class="je-tree-item-expand" :style="styles" @click="onExpand">  
      <view v-if="isFolder" class="triangle" />  
    </view>  
    <view class="je-tree-item-content">  
      <!-- 节点内容 -->  
      <view class="je-tree-item-text">  
        <slot :record="data"></slot>  
      </view>  
    </view>  
  </view>  
  <!-- 递归子节点 -->  
  <template v-if="isFolder && isExpanded">  
    <UiTreeItem v-for="(item, index) in children" :key="index" :data="item" :layer="layer + 1">  
      <template #default="{ record }">  
        <slot :record="record"></slot>  
      </template>  
    </UiTreeItem>  
  </template>  
</template>  
<script>  
  import UiTreeItem from './ui-tree-item.vue';  
  import { computed, ref, inject } from 'vue';  
  export default {  
    name: 'UiTreeItem',  
    // #ifdef MP-WEIXIN  
    components: { UiTreeItem },  
    // #endif  
    props: {  
      layer: { type: Number, default: 1 },  
      defaultSlot: Boolean, // 默认插槽  
      data: Object,  
    },  
    emits: ['click'],  
    setup(props) {  
      const $tree = inject('je-tree-context');  
      const childrenField = 'children';  
      const node = ref(props.data);  
      const children = computed(() => {  
        return node.value[childrenField] ?? [];  
      });  
      const isFolder = computed(() => {  
        return !node.value.leaf && children.value.length > 0;  
      });  
      const isExpanded = computed(() => {  
        return node.value.expanded;  
      });  
      const styles = computed(() => {  
        return {  
          paddingLeft: (props.layer - 1) * $tree.props.indent + 'px',  
        };  
      });  
      const onExpand = () => {  
        if (isFolder.value) {  
          node.value.expanded = !isExpanded.value;  
        }  
      };  
      return {  
        children,  
        isFolder,  
        isExpanded,  
        styles,  
        onExpand,  
      };  
    },  
  };  
</script>  
<style lang="scss">  
  $je-gray-8: #8c8c8c !default;  
  .je-tree-item {  
    display: flex;  
    align-items: center;  

    &-expand,  
    &-checkbox,  
    &-icon {  
      flex: 0 0 auto;  
      width: 20px;  
      text-align: center;  
      color: $je-gray-8;  
    }  
    &-content {  
      flex: 1;  
      display: flex;  
      align-items: center;  
    }  
    &-text {  
      flex: 1;  
      padding: 10px 5px;  
      font-size: 16px;  
      line-height: 1;  
      word-break: keep-all;  
    }  

    &-expand .triangle {  
      width: 0;  
      height: 0;  
      border-top: 6px solid transparent;  
      border-left: 7px solid $je-gray-8;  
      border-bottom: 6px solid transparent;  
      border-radius: 1px;  
      display: inline-block;  
    }  
    &.is-expanded {  
      .je-tree-item-expand .triangle {  
        transform: rotate(90deg);  
      }  
    }  
  }  
</style>  

操作步骤:

tree.vue

<template>  
  <ui-tree :data="data">  
    <template #item="{ record }"> {{ record.text }} </template>  
  </ui-tree>  
</template>  
<script>  
  export default {  
    setup() {  
      const data = [{"id":"01","text":"选项01","value":"item01","parent":0,"leaf":false,"children":[{"id":"011","text":"选项011","value":"item011","parent":"01","leaf":false,"children":[]},{"id":"012","text":"选项012","value":"item012","parent":"01","leaf":false,"children":[{"id":"0121","text":"选项0121","value":"item0121","parent":"012","leaf":true,"children":[]},{"id":"0122","text":"选项0122","value":"item0122","parent":"012","leaf":true,"children":[]},{"id":"0123","text":"选项0123","value":"item0123","parent":"012","leaf":true,"children":[]}]},{"id":"013","text":"选项013","value":"item013","parent":"01","leaf":false,"children":[{"id":"0131","text":"选项0131","value":"item0131","parent":"013","leaf":true,"children":[]}]}]},{"id":"02","text":"选项02","value":"item02","parent":0,"leaf":false,"children":[{"id":"021","text":"选项021","value":"item021","parent":"02","leaf":false,"children":[{"id":"0211","text":"选项0211","value":"item0211","parent":"021","leaf":true,"children":[]},{"id":"0212","text":"选项0212","value":"item0212","parent":"021","leaf":true,"children":[]},{"id":"0213","text":"选项0213","value":"item0213","parent":"021","leaf":true,"children":[]}]},{"id":"022","text":"选项022","value":"item022","parent":"02","leaf":false,"children":[{"id":"0221","text":"选项0221","value":"item0221","parent":"022","leaf":true,"children":[]},{"id":"0222","text":"选项0222","value":"item0222","parent":"022","leaf":true,"children":[]},{"id":"0223","text":"选项0223","value":"item0223","parent":"022","leaf":true,"children":[]}]},{"id":"023","text":"选项023","value":"item023","parent":"02","leaf":false,"children":[{"id":"0231","text":"选项0231","value":"item0231","parent":"023","leaf":true,"children":[]}]}]},{"id":"03","text":"选项03","value":"item03","parent":0,"leaf":false,"children":[{"id":"031","text":"选项031","value":"item031","parent":"03","leaf":false,"children":[]},{"id":"032","text":"选项032","value":"item032","parent":"03","leaf":false,"children":[]}]}]  
      return { data };  
    },  
  };  
</script>  

预期结果:

正常显示树形节点

实际结果:

H5显示正常,微信小程序节点展开后,显示不正常

bug描述:

树形组件,递归子节点时,子节点中的插槽,在H5中正常,微信小程序中不正常

2023-01-04 10:16 负责人:无 分享
已邀请:

要回复问题请先登录注册