更新记录

1.0.1（2024-06-14）

修复最顶级默认选中报错bug

v1.0.0（2024-06-07）

v1.0.0

平台兼容性

structure-cascade

• 树形结构数据选择组件。
• 适用于一些多级部门、组织架构类的数据选择。
• 根据实际开发需求整理出来的，有需要的可以进行二次开发。
• 最新的项目示例代码可在GitHub获取。

使用方法

在 script 中引用组件

import structureCascade from '@/components/structure-cascade/structure-cascade.vue'
export default {
  components: {
    structureCascade
  }
}

在 template 中使用组件

<structure-cascade
    ref="strCascade"
    v-model="strResults"
    topTitle="组织架构"
    valueField="id"
    labelField="name"
    :checkIcon="require('@/static/icons/icon_gou.png')"
    :moreIcon="require('@/static/icons/ico_more@2x.png')"
    :treeData="treeData">
</structure-cascade>

Props 参数说明

Methods 组件内方法

Notes 注意事项

• 该组件尚不支持父子节点联动选中。
• 图片路径请使用require，例如：:checkIcon="require('@/static/icons/icon_gou.png')"。
• 设置默认值选中时，需要valueField和labelField两个属性参数。
• 树形结构数据中子节点需要有parentId属性参数，有默认值选中时回显需要使用到。
• 如果对您有帮助，请鼓励支持一下，。

Demo 代码示例

<template>
  <view>
    <structure-cascade
      ref="strCascade"
      v-model="strResults"
      topTitle="组织架构"
      valueField="id"
      labelField="name"
      :checkIcon="require('@/static/icons/icon_gou.png')"
      :moreIcon="require('@/static/icons/ico_more@2x.png')"
      :treeData="treeData">
    </structure-cascade>
  </view>
</template>

<script>
  import structureCascade from '@/components/structure-cascade/structure-cascade.vue'
  export default {
    components: {
      structureCascade
    },
    data() {
      return {
        treeData: [
          {
            id: 1,
            name: '一级_1',
            children: [
              {
                id: 2,
                name: '二级_1-1',
                parentId: 1
              },
              {
                id: 3,
                name: '二级_1-2',
                parentId: 1
              }
            ]
          }
        ], // 树形结构
        strResults: [
          {
            id: 3,
            name: '二级_1-2'
          }
        ] // 默认选中回显
      }
    }
  }
</script>