Cascader组件详解

一、Cascader组件设置默认值

Cascader组件是一个级联选择器，可以通过设置defaultValue属性来设置默认值，当然也可以通过value属性和onChange回调函数来实现值的变更。defaultValue属性接受一个数组，表示默认选中的选项，数组的每一项对应一个级别。注意：defaultValue数组中的每一项必须是字符串类型。

import { Cascader } from 'antd';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
];

const App = () => (
  
);

ReactDOM.render(, mountNode);

二、Cascader选择器

Cascader组件是一个可以搜索的级联选择器，可以通过showSearch属性来开启搜索功能。当我们需要使用搜索功能的时候，建议设置changeOnSelect为true，这样每一次选中选项就会立刻触发onChange回调函数。

import { Cascader } from 'antd';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
];

function onChange(value, selectedOptions) {
  console.log(value, selectedOptions);
}

const App = () => (
   path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}} changeOnSelect />
);

ReactDOM.render(, mountNode);

三、Cascader多选

Cascader组件可以通过设置multiple属性来启用多选功能。此时selectedOptions参数中会返回一个数组，表示所有被选中的选项。同时，调用onChange回调函数的时候，也会传入一个数组，表示所有被选中的选项的值数组。

import { Cascader } from 'antd';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
          {
            value: 'lingyin',
            label: 'Ling Yin Temple',
          },
        ],
      },
    ],
  },
];

function onChange(value, selectedOptions) {
  console.log(value, selectedOptions);
}

const App = () => (
   path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}} changeOnSelect multiple />
);

ReactDOM.render(, mountNode);

四、Cascader回显

我们可以通过设置value属性来控制Cascader的选中状态。当然，如果我们需要回显多个选项，那么就需要使用数组来设置value属性。同时，建议设置changeOnSelect为true，这样每一次选中选项就会立刻触发onChange回调函数。

import { Cascader } from 'antd';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
          {
            value: 'lingyin',
            label: 'Ling Yin Temple',
          },
        ],
      },
    ],
  },
];

function onChange(value, selectedOptions) {
  console.log(value, selectedOptions);
}

const App = () => (
   path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}} changeOnSelect value={['zhejiang', 'hangzhou', 'xihu']} />
);

ReactDOM.render(, mountNode);

五、Antd Cascader

Antd是一个非常优秀的React组件库，其中Cascader组件是其提供的一个非常好用的级联选择器，可以在网站开发和移动端APP开发中广泛使用。Antd Cascader提供了非常丰富的自定义选项，可以根据不同的业务需求来进行定制。

下方是一个使用Antd Cascader的例子，你可以在Antd官网上自行寻找更多的例子和文档。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Cascader } from 'antd';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

function onChange(value, selectedOptions) {
  console.log(value, selectedOptions);
}

function filter(inputValue, path) {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
}

const App = () => (
  
);

ReactDOM.render(, mountNode);

六、Cascader默认值

Cascader组件根据defaultValue、value等属性的设置来设置默认值。这些属性的设置非常简单，只需要设置一下对应的属性值即可。同时，我们可以在options属性中设置某个选项的disabled为true，这样该选项就会被禁用，并且不能被选择。

下方是一个例子，你可以在这个例子中自行测试自己的理解。

import { Cascader } from 'antd';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
      {
        value: 'ningbo',
        label: 'Ningbo',
        disabled: true,
        children: [
          {
            value: 'tianyi',
            label: 'Tian Yi',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

const App = () => (
  
);

ReactDOM.render(, mountNode);

七、Element Cascader

Element是另一个很受欢迎的Vue组件库，也提供了类似于Antd的Cascader组件。Element Cascader提供了非常丰富的自定义选项，可以根据不同的业务需求来进行定制。

下方是一个使用Element Cascader的例子，你可以在Element官网上自行寻找更多的例子和文档。

<template>
  <div class="block">
    <span class="demonstration">默认值：{{ cascader }}</span>
    <el-cascader
      v-model="cascader"
      :options="options">
    </el-cascader>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'Demo',
  setup() {
    const state = reactive({
      cascader: [],
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake'
                }
              ]
            }
          ]
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men'
                }
              ]
            }
          ]
        }
      ]
    })

    return { state }
  }
})
</script>

<style scoped>
.block {
  margin-bottom: 20px;
}
.demonstration {
  font-size: 14px;
  padding: 20px 0 10px 0;
}
</style>

八、Cascader获取选中的值

Cascader组件可以通过onChange回调函数来获取当前选中的值。onChange回调函数会在选中选项时触发，接收两个参数：选中的值（value）和选中的选项的数据（选项数组）。

import { Cascader } from 'antd';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
      {
        value: 'ningbo',
        label: 'Ningbo',
        disabled: true,
        children: [
          {
            value: 'tianyi',
            label: 'Tian Yi',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

function onChange(value, selectedOptions) {
  console.log(value, selectedOptions);
}

const App = () => (
   path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}} changeOnSelect />
);

ReactDOM.render(, mountNode);