Cascader

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

基本用法

使用 <Breadcrumb> 包裹面包屑的每一项 <Breadcrumb.Item>。

function App() {
  const children3 = (pre) => [
    { label: `${pre}-黄金价格`, value: 'k02938' },
    { label: `${pre}-白银价格`, value: 'k02939' },
    { label: `${pre}-钻石价格`, value: 'k09284' },
    { label: `${pre}-套装价格`, value: 'k00231' },
    { label: `${pre}-铂金价格`, value: 'k00281' }
  ]

  const data = [
    {
      label: '售前咨询',
      value: '1',
      top: true,
      children: [
        { label: '首饰保养', value: '1001', children: children3('1001') },
        { label: '价格咨询', value: '1002', children: children3('1002') },
        { label: '后期维护', value: '1003', children: children3('1003') },
        { label: '贵金属咨询', value: '1004', children: children3('1004') }
      ]
    },
    {
      label: '售后维护',
      value: '2',
      lazy: true,
      children: [
        { label: '首饰保养', value: '2001', children: children3('2001') },
        { label: '价格咨询', value: '2002', children: children3('2002') },
        { label: '后期维护', value: '2003', children: children3('2003') },
        { label: '贵金属咨询', value: '2004', children: children3('2004') },
        { label: '贵金属咨询1', value: '2005', children: children3('2005') },
        { label: '贵金属咨询2', value: '2006', children: children3('2006') }
      ]
    },
    {
      label: '售后纠纷',
      value: '3',
      lazy: true,
      children: [
        { label: '首饰保养', value: '3001', children: children3('3001') },
        { label: '价格咨询', value: '3002', children: children3('3002') },
        { label: '后期维护', value: '3003', children: children3('3003') },
        { label: '贵金属咨询', value: '3004', children: children3('3004') }
      ]
    },
    {
      label: '投诉',
      value: '4',
      children: [
        { label: '首饰保养', value: '4001' },
        { label: '价格咨询', value: '4002' },
        { label: '后期维护', value: '4003' },
        { label: '贵金属咨询', value: '4004' }
      ]
    }
  ]

  const args = {
    data,
    top: true,
    onTop: (value, index) => {
      console.log(value, index, 'top')
    },
    value: [],
    placeholder: '请选择',
    onChange: (value) => {
      console.log('value', value)
    },
    onInputChange: (value) => {
      console.log(value, 'onInputChange')
    },
    onPressEnter: (e) => {
      console.log(e, 'onPressEnter')
    }
  }

  return (
    <div className="ykui-demo-column">
      <Cascader {...args} />
    </div>
  )
}

禁用状态

function App() {
  return (
    <div className="ykui-demo-column">
      <Cascader readOnly />
    </div>
  );
}

可搜索

function App() {
  const children3 = (pre) => [
    { label: `${pre}-黄金价格`, value: 'k02938' },
    { label: `${pre}-白银价格`, value: 'k02939' },
    { label: `${pre}-钻石价格`, value: 'k09284' },
    { label: `${pre}-套装价格`, value: 'k00231' },
    { label: `${pre}-铂金价格`, value: 'k00281' }
  ]

  const data = [
    {
      label: '售前咨询',
      value: '1',
      top: true,
      children: [
        { label: '首饰保养', value: '1001', children: children3('1001') },
        { label: '价格咨询', value: '1002', children: children3('1002') },
        { label: '后期维护', value: '1003', children: children3('1003') },
        { label: '贵金属咨询', value: '1004', children: children3('1004') }
      ]
    },
    {
      label: '售后维护',
      value: '2',
      lazy: true,
      children: [
        { label: '首饰保养', value: '2001', children: children3('2001') },
        { label: '价格咨询', value: '2002', children: children3('2002') },
        { label: '后期维护', value: '2003', children: children3('2003') },
        { label: '贵金属咨询', value: '2004', children: children3('2004') },
        { label: '贵金属咨询1', value: '2005', children: children3('2005') },
        { label: '贵金属咨询2', value: '2006', children: children3('2006') }
      ]
    },
    {
      label: '售后纠纷',
      value: '3',
      lazy: true,
      children: [
        { label: '首饰保养', value: '3001', children: children3('3001') },
        { label: '价格咨询', value: '3002', children: children3('3002') },
        { label: '后期维护', value: '3003', children: children3('3003') },
        { label: '贵金属咨询', value: '3004', children: children3('3004') }
      ]
    },
    {
      label: '投诉',
      value: '4',
      children: [
        { label: '首饰保养', value: '4001' },
        { label: '价格咨询', value: '4002' },
        { label: '后期维护', value: '4003' },
        { label: '贵金属咨询', value: '4004' }
      ]
    }
  ]

  const args = {
    data,
    filterable: true,
    value: ['1', '1001', 'k09284'],
    onChange: (value) => {
      console.log(Filterable.args.value)
      Filterable.args.value = value
    },
    onInputChange: (value) => {
      console.log(value, 'onInputChange')
    },
    onPressEnter: (e) => {
      console.log(e, 'onPressEnter')
    }
  }

  return (
    <div className="ykui-demo-column">
      <Cascader {...args} />
    </div>
  )
}

懒加载

function App() {
  const children3 = (pre) => [
    { label: `${pre}-黄金价格`, value: 'k02938' },
    { label: `${pre}-白银价格`, value: 'k02939' },
    { label: `${pre}-钻石价格`, value: 'k09284' },
    { label: `${pre}-套装价格`, value: 'k00231' },
    { label: `${pre}-铂金价格`, value: 'k00281' }
  ]

  const data = [
    {
      label: '售前咨询',
      value: '1',
      top: true,
      children: [
        { label: '首饰保养', value: '1001', children: children3('1001') },
        { label: '价格咨询', value: '1002', children: children3('1002') },
        { label: '后期维护', value: '1003', children: children3('1003') },
        { label: '贵金属咨询', value: '1004', children: children3('1004') }
      ]
    },
    {
      label: '售后维护',
      value: '2',
      lazy: true,
      children: [
        { label: '首饰保养', value: '2001', children: children3('2001') },
        { label: '价格咨询', value: '2002', children: children3('2002') },
        { label: '后期维护', value: '2003', children: children3('2003') },
        { label: '贵金属咨询', value: '2004', children: children3('2004') },
        { label: '贵金属咨询1', value: '2005', children: children3('2005') },
        { label: '贵金属咨询2', value: '2006', children: children3('2006') }
      ]
    },
    {
      label: '售后纠纷',
      value: '3',
      lazy: true,
      children: [
        { label: '首饰保养', value: '3001', children: children3('3001') },
        { label: '价格咨询', value: '3002', children: children3('3002') },
        { label: '后期维护', value: '3003', children: children3('3003') },
        { label: '贵金属咨询', value: '3004', children: children3('3004') }
      ]
    },
    {
      label: '投诉',
      value: '4',
      children: [
        { label: '首饰保养', value: '4001' },
        { label: '价格咨询', value: '4002' },
        { label: '后期维护', value: '4003' },
        { label: '贵金属咨询', value: '4004' }
      ]
    }
  ]

  let i = 0
  const args = {
    data,
    lazy: true,
    value: [123123, 123123],
    lazyLoad: (node, resolve) => {
      setTimeout(() => {
        resolve([{ label: `aaa${i++}`, value: 1, lazy: true }])
      }, 500)
    },
    defaultLabel() {
      console.log('defaultLabel')
      return '123123'
    },
    onChange: (value) => {
      console.log('value', value)
    }
  }

  return (
    <div className="ykui-demo-column">
      <Cascader {...args} />
    </div>
  )
}

Options 用法

function App() {
  const optionsData = [
    {
      thename: '售前咨询1',
      theid: '1',
      children: []
    },
    {
      thename: '售前咨询2',
      theid: '2',
      children: []
    },
    {
      thename: '售前咨询3',
      theid: '3',
      children: []
    },
    {
      thename: '售前咨询4',
      theid: '4',
      children: []
    }
  ]

  const args = {
    clearable: true,
    changeOnSelect: true,
    data: optionsData,
    options: {
      children: '-',
      label: 'thename',
      id: 'theid'
    },
    placeholder: '请选择任务所属中心',
    showAllLevels: true,
    value: [],
    onChange: (value) => {
      console.log(value)
    }
  }

  return (
    <div className="ykui-demo-column">
      <Cascader {...args} />
    </div>
  )
}

API

属性	说明	类型	默认值
children	内容	ReactNode	--
className	类名	string	--
style	样式	CSSProperties	--
value	选中值	number〡string	--
readOnly	只读	boolean	--
disabled	禁用	boolean	--
data	数据	DataTypes	--
inputRef	input 节点	Ref	--
separator	自定义分隔符	string	/
filterable	是否开启搜索	boolean	--
placeholder	提示	string	--
filterNullPlaceholder	未匹配到搜索值时提示文字	string	未匹配到对应内容
clearable	可清空	boolean	--
top	置顶	boolean	--
arrow	箭头	boolean	--
lazy	是否懒加载	boolean	--
filterSize	搜索选项最大数	number	--
options	数据	object	--
onChange	触发事件	Func	--
onClear	触发事件	Func	--
onInputChange	触发事件	Func	--
onPressEnter	触发事件	Func	--
lazyLoad	懒加载的方法	Func	--
filterMethods	过滤方法	Func	--
defaultLabel	未匹配到 label 时触发的方法	Func	--