Picker 选择器
发布日期：2021-05-08 00:23:11
浏览次数：14
分类：精选文章
本文共 18176 字，大约阅读时间需要 60 分钟。
Picker 选择器
层级选择
使用Ant Design Mobile
数据项
const province = [ { label: "北京", value: "01", children: [ { label: "东城区", value: "01-1", }, { label: "西城区", value: "01-2", }, { label: "崇文区", value: "01-3", }, { label: "宣武区", value: "01-4", }, ], }, { label: "浙江", value: "02", children: [ { label: "杭州", value: "02-1", children: [ { label: "西湖区", value: "02-1-1", }, { label: "上城区", value: "02-1-2", }, { label: "江干区", value: "02-1-3", }, { label: "下城区", value: "02-1-4", }, ], }, { label: "宁波", value: "02-2", children: [ { label: "xx区", value: "02-2-1", }, { label: "yy区", value: "02-2-2", }, ], }, { label: "温州", value: "02-3", }, { label: "嘉兴", value: "02-4", }, { label: "湖州", value: "02-5", }, { label: "绍兴", value: "02-6", }, ], }, ]; api
实现代码
import React, { useState } from "react";import { Picker, List } from "antd-mobile";import "antd-mobile/dist/antd-mobile.css";export default function Index() { const defdata = { data: [], cols: 1, pickerValue: [], asyncValue: [], gradesValue: [], visible: false, visible2: false, colorValue: ["#00FF00"], antdDistrict: [], }; const [value, setValue] = useState(defdata); const province = [ { label: "北京", value: "01", children: [ { label: "东城区", value: "01-1", }, { label: "西城区", value: "01-2", }, { label: "崇文区", value: "01-3", }, { label: "宣武区", value: "01-4", }, ], }, { label: "浙江", value: "02", children: [ { label: "杭州", value: "02-1", children: [ { label: "西湖区", value: "02-1-1", }, { label: "上城区", value: "02-1-2", }, { label: "江干区", value: "02-1-3", }, { label: "下城区", value: "02-1-4", }, ], }, { label: "宁波", value: "02-2", children: [ { label: "xx区", value: "02-2-1", }, { label: "yy区", value: "02-2-2", }, ], }, { label: "温州", value: "02-3", }, { label: "嘉兴", value: "02-4", }, { label: "湖州", value: "02-5", }, { label: "绍兴", value: "02-6", }, ], }, ]; const onOk = (value) => { console.log(value); setValue({ gradesValue: value }); }; return ( setValue({ gradesValue: v })} onOk={ (v) => onOk(v)}> setValue({ visible2: true })}> Multip
);} 这里，因为项目使用trao开发小程序
避免引入更多依赖，这里使用两列处理
当然了，按需导入组件，也是没啥问题的
下面是具体代码
客户分类 chooseMultiSelector(e)} onColumnChange={ e => chooseColumnMultiSelector(e)} > { gradeChoose || '全部'}
const chooseMultiSelector = e => { const first = grades.col1[e.detail.value[0]]; const last = grades.col1[e.detail.value[1]]; const idArry = [first.id, last.id].filter(el => !!el); if (idArry.length !== 0) { setGradeChoose(`${ first.name}/${ last.name}`); handleFilterParamsChange('classify_id', idArry[idArry.length - 1]); } else { setGradeChoose(undefined); handleFilterParamsChange('classify_id', ''); } }; const chooseColumnMultiSelector = e => { if (e.detail.column === 0) { // 判断第1列value值省发生了变化 const index = e.detail.value; if ( grades.col1[index].sub_client_classifies && grades.col1[index].sub_client_classifies.length > 0 ) { const newData = grades.col1[index].sub_client_classifies.filter( el => el.id !== null, ); newData.unshift({ id: null, name: '全部', }); setGrades({ ...grades, col2: newData, }); } } else if (e.detail.column === 1) { // const index = e.detail.value; // if (grades.col1[index].child && grades.col1[index].child.length > 0) { // setGrades({ // col2: grades.col1[index].sub_client_classifies, // }); // } } }; import React, { useState } from 'react';import { useDispatch, useSelector } from 'react-redux';import { View, Picker } from '@tarojs/components';import { AtDrawer, AtButton } from 'taro-ui';import customerServices from '../../services/customerProfileList';import Taro, { useDidShow } from '@tarojs/taro';export default function Filter() { const dispatch = useDispatch(); const { drawerShow, filterParams, customergetStructure } = useSelector( state => state.customerProfileList, ); const defaultGrades = { gradeStart: [], gradesOther: [], col1: [], col2: [], col3: [], }; const [grades, setGrades] = useState(defaultGrades); const [gradeChoose, setGradeChoose] = useState(); useDidShow(() => { // TODO获取经营组数据 dispatch({ type: 'customerProfileList/getCustomergetStructure', }); const defauleGrades = [ { created_at: '2021-04-23 11:50:22', deleted_at: null, id: 30, name: 'A类', pid: null, sort: 3, sub_client_classifies: [ { created_at: '2021-04-02 16:20:45', deleted_at: null, id: 19, name: 'A1-1类', pid: 30, sort: 1, updated_at: '2021-04-23 11:50:39', sub_client_classifies: [ { created_at: '2021-04-02 16:20:45', deleted_at: null, id: 19, name: 'A1-2类', pid: 30, sort: 1, sub_client_classifies: [], updated_at: '2021-04-23 11:50:39', }, ], }, ], }, { created_at: '2021-04-23 11:50:22', deleted_at: null, id: 31, name: 'ABI类', pid: null, sort: 4, sub_client_classifies: [ { created_at: '2021-04-02 16:20:45', deleted_at: null, id: 19, name: 'A2类', pid: 30, sort: 1, sub_client_classifies: [], updated_at: '2021-04-23 11:50:39', }, ], }, { created_at: '2021-04-23 11:50:22', deleted_at: null, id: 31, name: '第三项', pid: null, sort: 4, sub_client_classifies: [ { created_at: '2021-04-02 16:20:45', deleted_at: null, id: 19, name: 'A3类', pid: 30, sort: 1, sub_client_classifies: [], updated_at: '2021-04-23 11:50:39', }, { created_at: '2021-04-02 16:20:45', deleted_at: null, id: 19, name: 'A3-1类', pid: 30, sort: 1, sub_client_classifies: [], updated_at: '2021-04-23 11:50:39', }, ], }, ]; if (defauleGrades.length > 0) { defauleGrades.unshift({ id: null, name: '全部', sub_client_classifies: [ { id: null, name: '全部', }, ], }); if (defauleGrades[0].sub_client_classifies) { setGrades({ ...grades, col1: defauleGrades, col2: defauleGrades[0].sub_client_classifies, }); return; } setGrades({ ...grades, col2: defauleGrades[0].sub_client_classifies, col1: defauleGrades, }); } }); const handleFilterParamsChange = (key, value) => { dispatch({ type: 'customerProfileList/updateStateProps', payload: { name: 'filterParams', value: { [key]: value, }, }, }); }; const chooseMultiSelector = e => { const first = grades.col1[e.detail.value[0]]; const last = grades.col1[e.detail.value[1]]; const idArry = [first.id, last.id].filter(el => !!el); if (idArry.length !== 0) { setGradeChoose(`${ first.name}/${ last.name}`); handleFilterParamsChange('classify_id', idArry[idArry.length - 1]); } else { setGradeChoose(undefined); handleFilterParamsChange('classify_id', ''); } }; const chooseColumnMultiSelector = e => { if (e.detail.column === 0) { // 判断第1列value值省发生了变化 const index = e.detail.value; if ( grades.col1[index].sub_client_classifies && grades.col1[index].sub_client_classifies.length > 0 ) { const newData = grades.col1[index].sub_client_classifies.filter( el => el.id !== null, ); newData.unshift({ id: null, name: '全部', }); setGrades({ ...grades, col2: newData, }); } } else if (e.detail.column === 1) { // const index = e.detail.value; // if (grades.col1[index].child && grades.col1[index].child.length > 0) { // setGrades({ // col2: grades.col1[index].sub_client_classifies, // }); // } } }; const handleDrawerClose = () => { dispatch({ type: 'customerProfileList/overrideStateProps', payload: { drawerShow: false, }, }); }; const submit = () => { dispatch({ type: 'customerProfileList/getCustomerList', }); handleDrawerClose(); }; const resetC = () => { dispatch({ type: 'customerProfileList/overrideStateProps', payload: { filterParams: { }, }, }); dispatch({ type: 'customerProfileList/getCustomerList', }); handleDrawerClose(); }; const chooseCopy = type => { Taro.navigateTo({ url: '../handler/index', events: { setData(key, data) { const name = `${ type}_name`; const id = `${ type}_id`; handleFilterParamsChange(name, data.name); handleFilterParamsChange(id, data.id); }, }, }); }; return ( 审批状态 { handleFilterParamsChange( 'approve_state', customerServices.STATUS_MAP[e.detail.value].key, ); }} > { customerServices.STATUS[filterParams.approve_state] || '全部'} { customerServices.STATUS[filterParams.status]} 业务阶段 { handleFilterParamsChange( 'current_phase_id', customerServices.BUSINESSSTAGE_MAP[e.detail.value].key, ); }} > { customerServices.BUSINESSSTAGE[filterParams.current_phase_id] || '全部'} 经营组 { handleFilterParamsChange( 'operations_group_id', customergetStructure[e.detail.value].id, ); }} > { filterParams.operations_group_id ? customergetStructure.find( el => el.id === filterParams.operations_group_id, )?.name : '全部'} 客户分类 chooseMultiSelector(e)} onColumnChange={ e => chooseColumnMultiSelector(e)} > { gradeChoose || '全部'} 负责人 { chooseCopy('principal'); }} > { filterParams.principal_name || '请选择'} 当前审批人 { chooseCopy('approver'); }} > { filterParams.approver_name || '请选择'} 重置 确定 );} 发表评论
最新留言
路过，博主的博客真漂亮。。
[***.116.15.85]2025年04月05日 08时03分32秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
keil左侧文件调整方法
2019-03-05
本地分支关联远程分支
2019-03-05
STM8 GPIO模式
2019-03-05
STM32boot启动
2019-03-05
回调函数（callback function）
2019-03-05
omnet++
2019-03-05
23种设计模式一：单例模式
2019-03-05
Qt中的析构函数
2019-03-05
CSharp中委托（一）委托、匿名函数、lambda表达式、多播委托、窗体传值、泛型委托
2019-03-05
二叉堆的c++模板类实现
2019-03-05
C语言实现dijkstra(adjacence matrix)
2019-03-05
用C#实现封装-徐新帅-专题视频课程
2019-03-05
C语言学习从初级到精通的疯狂实战教程-徐新帅-专题视频课程
2019-03-05
三层框架+sql server数据库 实战教学-徐新帅-专题视频课程
2019-03-05
NAT工作原理
2019-03-05
Processes, threads and goroutines
2019-03-05
c++中的10种常见继承
2019-03-05
E28 LoRa模块透传 定点传输 RSSI测试与MicroPython应用
2019-03-05
Vue学习—深入剖析渲染函数
2019-03-05
Vue学习—深入剖析函数式组件
2019-03-05
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 457334046 位访客