更新记录

1.0.0（2023-08-24）

上传

平台兼容性

级联选择器(vue3)

可以懒加载。

attributes

listItem

emits

示例

<template>
  <view class="common-page">
    <view class="title">懒加载，无默认数据</view>
    <mosowe-cascader
      v-model="noDefaultValue"
      :list="firstList"
      @nodeClick="nodeClick"
      @confirm="confirm"></mosowe-cascader>

    <view class="title">懒加载，有默认数据，不包含叶子节点</view>
    <mosowe-cascader
      v-model="hasDefaultValue"
      :list="nowList"
      @nodeClick="hasDefaultValueNodeClick"
      @confirm="confirm"></mosowe-cascader>

    <view class="title">懒加载，有默认数据，包含叶子节点</view>
    <mosowe-cascader
      v-model="hasDefaultValueLast"
      :list="nowLastList"
      @nodeClick="hasDefaultValueLastNodeClick"
      @confirm="confirm"></mosowe-cascader>

    <view class="title">本地数据，无初始值，tree树形结构【local】</view>
    <mosowe-cascader
      v-model="noLoadValue"
      :list="noLoadTreeArr"
      local
      @confirm="confirm"></mosowe-cascader>

    <view class="title">本地数据，有初始值，不含叶子节点，tree树形结构【local】</view>
    <mosowe-cascader
      v-model="noLoadValue2"
      :list="noLoadTreeArr"
      local
      @confirm="confirm"></mosowe-cascader>

    <view class="title">本地数据，有初始值，含叶子节点，tree树形结构【local】</view>
    <mosowe-cascader
      v-model="noLoadValue3"
      :list="noLoadTreeArr"
      local
      @confirm="confirm"></mosowe-cascader>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
/* 测试一 */
// 无默认数据
const noDefaultValue = ref([]);
const firstList = ref([
  {
    text: '初始-1',
    value: 1,
    pid: 0,
    isLeaf: false,
    children: []
  },
  {
    text: '初始-2',
    value: 2,
    pid: 0,
    isLeaf: false,
    children: []
  }
]);
const nodeClick = (e: any, level: number, callBack: (data: any[]) => void) => {
  setTimeout(() => {
    const list = Array.from({ length: 20 }).map((item: any, index: number) => {
      return {
        text: `${e.text}(${index})-${level}`,
        value: e.value + '-' + index,
        isLeaf: level >= 2 ? true : false,
        pid: e.value,
        children: []
      };
    });
    console.log(list);
    callBack(list);
  }, 1000);
};

/* 测试一 end*/

/* 测试二 */
// 有默认数据，且不包含最后一项，格式如下
const hasDefaultValue = ref([
  { text: '初始-1', value: 1, isLeaf: false, children: [], pid: 0 },
  { text: '初始-1(0)-1', value: '1-0', isLeaf: false, children: [], pid: 1 }
]);
// 有默认数据的情况下，列表展示的是最后一级的下级目录列表（有子集）
const nowList = [
  { text: '初始-1(0)-1(0)-2', value: '1-0-0', pid: '1-0', isLeaf: false, children: [] },
  { text: '初始-1(0)-1(1)-2', value: '1-0-1', pid: '1-0', isLeaf: false, children: [] },
  { text: '初始-1(0)-1(2)-2', value: '1-0-2', pid: '1-0', isLeaf: false, children: [] },
  { text: '初始-1(0)-1(3)-2', value: '1-0-3', pid: '1-0', isLeaf: false, children: [] },
  { text: '初始-1(0)-1(4)-2', value: '1-0-4', pid: '1-0', isLeaf: false, children: [] }
];
const hasDefaultValueNodeClick = (e: any, level: number, callBack: (data: any[]) => void) => {
  setTimeout(() => {
    if (!e) {
      // e不存在时即获取一级列表
      callBack([...firstList.value]);
      return;
    }
    const list = Array.from({ length: 5 }).map((item: any, index: number) => {
      return {
        text: `${e.text}(${index})-${level}`,
        value: e.value + '-' + index,
        isLeaf: level >= 2 ? true : false,
        pid: e.value,
        children: []
      };
    });
    callBack(list);
  }, 1000);
};

/* 测试二 end */

/* 测试三 */
// 有默认数据，且包含最后一项，格式如下
const hasDefaultValueLast = ref([
  { text: '初始-1', value: 1, isLeaf: false, children: [], pid: 0 },
  { text: '初始-1(0)-1', value: '1-0', isLeaf: true, children: [], pid: 1 }
]);
// 有默认数据的情况下，列表展示的是所处当前子集列表（没有子集）
const nowLastList = [
  { text: '初始-1(0)-1', value: '1-0', isLeaf: true, children: [] },
  { text: '初始-1(1)-1', value: '1-1', isLeaf: true, children: [] },
  { text: '初始-1(2)-1', value: '1-2', isLeaf: true, children: [] },
  { text: '初始-1(3)-1', value: '1-3', isLeaf: true, children: [] },
  { text: '初始-1(4)-1', value: '1-4', isLeaf: false, children: [] }
];
const hasDefaultValueLastNodeClick = (e: any, level: number, callBack: (data: any[]) => void) => {
  setTimeout(() => {
    if (!e) {
      // e不存在时即获取一级列表
      callBack([...firstList.value]);
      return;
    }
    const list = Array.from({ length: 5 }).map((item: any, index: number) => {
      return {
        text: `${e.text}(${index})-${level}`,
        value: e.value + '-' + index,
        isLeaf: level >= 2 ? true : false,
        pid: e.value,
        children: []
      };
    });
    callBack(list);
  }, 1000);
};

/* 测试三 end */

/* 测试四 */
// 本地数据，非懒加载
const noLoadValue = ref([]);
const noLoadTreeArr = [
  {
    text: '初始-1',
    value: '1',
    pid: '',
    isLeaf: false,
    children: [
      {
        text: '初始-1(0)-1',
        value: '1-0',
        isLeaf: true,
        pid: '1'
      },
      {
        text: '初始-1(1)-1',
        value: '1-1',
        isLeaf: true,
        pid: '1'
      }
    ]
  },
  {
    text: '初始-2',
    value: '2',
    pid: '',
    isLeaf: false,
    children: [
      {
        text: '初始-2(0)-1',
        value: '2-0',
        isLeaf: false,
        pid: '2',
        children: [
          {
            text: '初始-2(0)-1(0)-2',
            value: '2-0-0',
            pid: '2-0',
            isLeaf: true
          },
          {
            text: '初始-2(1)-1(1)-2',
            value: '2-0-1',
            pid: '2-0',
            isLeaf: true
          }
        ]
      },
      {
        text: '初始-2(1)-1',
        value: '2-1',
        pid: '2',
        isLeaf: true
      }
    ]
  }
];
/* 测试四 end */

/* 测试四 */
// 本地数据，非懒加载
const noLoadValue2 = ref([
  {
    text: '初始-2',
    value: '2',
    pid: '',
    isLeaf: false
  },
  {
    text: '初始-2(0)-1',
    value: '2-0',
    isLeaf: false,
    pid: '2'
  }
]);
/* 测试四 end */
/* 测试五 */
// 本地数据，非懒加载
const noLoadValue3 = ref([
  {
    text: '初始-1',
    value: '1',
    pid: '',
    isLeaf: false
  },
  {
    text: '初始-1(0)-1',
    value: '1-0',
    isLeaf: true,
    pid: '1'
  }
]);
/* 测试五 end */
const confirm = (data: any[]) => {
  console.log(data);
};
</script>

<style scope>
.title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin: 30rpx 0;
}
</style>