@antmjs/vantui/es/picker/demo/demo4.js

一套适用于Taro3及React的vantui组件库

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/* eslint-disable */
import { Picker } from '@antmjs/vantui';
import { citiesWithDistricts } from './options';
import { useState } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export default function Demo() {
  var _useState = useState(['福建', '莆田', '城厢区']),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var syncColumns = function syncColumns(_ref) {
    var values = _ref.values,
      columns = _ref.columns,
      changeIndex = _ref.changeIndex;
    var dataNew = _toConsumableArray(columns);
    var provinces = Object.keys(citiesWithDistricts) || columns[0] || [];
    var provincesValue = values[0] || provinces[0];
    return new Promise(function (resolve) {
      // 实际场景根据changeIndex请求
      console.info(changeIndex, values);
      setTimeout(function () {
        var _citiesWithDistricts;
        dataNew[0] = provinces;
        dataNew[1] = Object.keys(citiesWithDistricts[provincesValue || ''] || {});
        dataNew[2] = ((_citiesWithDistricts = citiesWithDistricts[provincesValue || '']) === null || _citiesWithDistricts === void 0 ? void 0 : _citiesWithDistricts[values[1] || dataNew[1][0]]) || [];
        console.info(dataNew, 'dataNew');
        resolve(dataNew);
      }, 500);
    });
  };
  return /*#__PURE__*/_jsx(Picker, {
    showToolbar: true,
    title: "\u8BF7\u9009\u62E9",
    mode: "content",
    syncColumns: syncColumns,
    value: value,
    onInput: function onInput(e) {
      setValue(e.detail);
    }
  });
}