find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器

介绍一个 Vue3 + uni-app + Wot Design(wd-picker) 的组件片段,功能是一个下拉选择器,用于选择"市场",选择后会触发数据更新。

html 复制代码
<wd-picker
  :columns="marketColumns"   <!-- 下拉数据源 -->
  v-model="value"            <!-- 当前选中值 -->
  use-default-slot           <!-- 启用自定义触发区 -->
  @confirm="onMarketChange"> <!-- 点"确定"后回调 -->
  <!-- 自定义触发区:显示文字 + 下拉图标 -->
  <view class="market-name">
    <view class="market-name__txt">{{ getLabel(value) }}</view>
    <img class="pull-icon" src="xxx.png"/>
  </view>
</wd-picker>
javascript 复制代码
const { sc: dictSc } = useDict(['sc']);   // 拿到原始市场字典
const marketColumns = computed(() => [               // 拼"全部"选项
  { label: '全部市场', value: '' },
  ...dictNcpSc.value
]);
javascript 复制代码
function onMarketChange(e) {   // e = { value, label ... }
  marketId.value = e.value;    // 保存 id
  getListData(e.value);        // 重新拉接口数据
}
javascript 复制代码
const getLabel = val =>
  marketColumns.value.find(item => item.value === val)?.label   // 可选链
  || '全部市场';                                           // 兜底

要点

  1. columns 必须是 { label, value }[] 格式。

  2. v-model 只存 value,不存 label

  3. use-default-slot 才能完全自定义外观。

  4. 字典里没有"全部市场",所以用计算属性拼接。

  5. 回显的时候使用find方法查找到匹配的市场。

Array.prototype.find详解

1.Array.find 精讲

javascript 复制代码
const elem = arr.find((element, index, array) => {
  /* 返回布尔值 */
}, thisArg);
  • 返回值 :第一个使回调返回 true 的元素,否则 undefined

  • 时间复杂度 :O(n),早停

  • 原数组不变

  • thisArg :可选,绑定回调内 this(箭头函数无效)

find 返回第一个满足条件的元素;找不到返回 undefined;回调参数 (element(谁), index(排第几), array(一共多少人));thisArg 绑定 this

① 只用 element(90% 场景)

按主键查找,返回对象

javascript 复制代码
const users = [{id: 3, name: 'Bob'}, {id: 5, name: 'Alice'}];
const alice = users.find(u => u.id === 5);

② 用到 index

index ≥ 2 且值 > 8

javascript 复制代码
const arr = [7, 4, 9, 12];
const first = arr.find((n, i) => n > 8 && i >= 2); // 9

③ 用到原数组引用

利用 a[i+1] 看后一项

javascript 复制代码
const arr = [1, 3, 5, 7];
const hit = arr.find((n, i, a) => i < a.length - 1 && a[i + 1] === n + 2);
// 返回 5,因为 5 后面是 7,差 2

④ thisArg 场景

回调内 this 指向 m

javascript 复制代码
class Threshold {
  constructor(t) { this.t = t; }
  ok(n) { return n > this.t; }
}
const m = new Threshold(10);
const arr = [4, 11, 6, 20];
const res = arr.find(function (n) { return this.ok(n); }, m);
// 返回 11
相关推荐
游戏开发爱好者89 分钟前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追4 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio