更新记录

1.0.0（2023-08-24） 下载此版本

上传

平台兼容性

Vue2 Vue3
× √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

级联选择器(vue3)

可以懒加载。

attributes

属性名 说明 类型 默认
modelValue v-model值 listItem[] -
list 首次加载的列表，或完整的本地数据tree listItem[] -
popupTitle 弹框标题 string 请选择
placeholder 未选择时文本框占位文案 string 请选择
local 本地数据，非懒加载 boolean false

listItem

属性名 说明 类型 必填
text 节点文案 string 是
value 节点值 number/string 是
pid 父节点值，值为0，null，'',undefind则为第一级节点 number/string 是
isLeaf 是否叶子节点 boolean 是
children 本地数据树形结构子集列表，此时必填 listItem[] 否

emits

事件名 说明 参数
nodeClick 列表节点点击 三个参数{node，level，callback}，当前节点node，当前level值，回调函数，回调函数接收一个数组用（listItem[]）于下一级展示
confirm 点击弹框确定的时候触发 当前已选值

示例


<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>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...