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);

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/154371.html