接上文，封裝了個人Vue組件庫的Cascader級聯選擇器，源碼附在了文章末尾，如下是文檔使用説明

Cascader 級聯選擇器

當一個數據集合有清晰的層級結構時，可通過級聯選擇器逐級查看並選擇。

基礎用法

只需為 Cascader 的dataSource可渲染出一個級聯選擇器。

antd esign vue級聯sort_#elementui

<template>
	<Cascader :dataSource = "dataSource" @change = "getList"></Cascader>
</template>
<script>
  export default {
    data() {
      return {
        dataSource: [
                {
                  value: "shejiyuanze",
                  label: "設計原則",
                  children: [
                    {
                      value: "yizhi",
                      label: "一致",
                      children: [
                        {
                          value: "tiqiu",
                          label: "踢球",
                        },
                        {
                          value: "shuijiao",
                          label: "睡覺",
                        },
                      ],
                    },
                    {
                      value: "tuanjie",
                      label: "團結",
                      children: [
                        {
                          value: "chifan",
                          label: "吃飯",
                        },
                      ],
                    },
                  ],
                },
                {
                  value: "kaoshiguize",
                  label: "考試規則",
                  children: [
                    {
                      value: "anjing",
                      label: "安靜",
                      children: [
                        {
                          value: "zuobi",
                          label: "作弊",
                        },
                        {
                          value: "jiaojuan",
                          label: "交卷",
                        },
                      ],
                    },
                    {
                      value: "lianhe",
                      label: "聯合",
                      children: [
                        {
                          value: "shuxue",
                          label: "數學",
                        },
                      ],
                    },
                  ],
                },
              ],
            }
         },
         methods: {
            getList(data) {
              console.log(data);
            },
         },
   }
</script>

禁用選項

通過在數據源中設置 disabled 字段來聲明該選項是禁用的

antd esign vue級聯sort_#組件化_02

<template>
	<Cascader :dataSource = "dataSource" @change = "getList"></Cascader>
</template>
<script>
  export default {
    data() {
      return {
        dataSource: [
                {
                  value: "shejiyuanze",
                  label: "設計原則",
                  children: [
                    {
                      value: "yizhi",
                      label: "一致",
                      children: [
                        {
                          value: "tiqiu",
                          label: "踢球",
                          disabled: true,
                        },
                        {
                          value: "shuijiao",
                          label: "睡覺",
                        },
                      ],
                    },
                    {
                      value: "tuanjie",
                      label: "團結",
                      children: [
                        {
                          value: "chifan",
                          label: "吃飯",
                          disabled: true,
                        },
                      ],
                    },
                  ],
                },
                {
                  value: "kaoshiguize",
                  label: "考試規則",
                  children: [
                    {
                      value: "anjing",
                      label: "安靜",
                      children: [
                        {
                          value: "zuobi",
                          label: "作弊",
                        },
                        {
                          value: "jiaojuan",
                          label: "交卷",
                          disabled: true,
                        },
                      ],
                    },
                    {
                      value: "lianhe",
                      label: "聯合",
                      children: [
                        {
                          value: "shuxue",
                          label: "數學",
                        },
                      ],
                    },
                  ],
                },
              ],
            }
         },
         methods: {
            getList(data) {
              console.log(data);
            },
         },
   }
</script>

可清空

通過 clearable 設置輸入框可清空

antd esign vue級聯sort_#前端_03

<template>
	<Cascader :dataSource = "dataSource" @change = "getList" clearable></Cascader>
</template>
<script>
  export default {
    data() {
      return {
        dataSource: [
                {
                  value: "shejiyuanze",
                  label: "設計原則",
                  children: [
                    {
                      value: "yizhi",
                      label: "一致",
                      children: [
                        {
                          value: "tiqiu",
                          label: "踢球",
                          disabled: true,
                        },
                        {
                          value: "shuijiao",
                          label: "睡覺",
                        },
                      ],
                    },
                    {
                      value: "tuanjie",
                      label: "團結",
                      children: [
                        {
                          value: "chifan",
                          label: "吃飯",
                          disabled: true,
                        },
                      ],
                    },
                  ],
                },
                {
                  value: "kaoshiguize",
                  label: "考試規則",
                  children: [
                    {
                      value: "anjing",
                      label: "安靜",
                      children: [
                        {
                          value: "zuobi",
                          label: "作弊",
                        },
                        {
                          value: "jiaojuan",
                          label: "交卷",
                          disabled: true,
                        },
                      ],
                    },
                    {
                      value: "lianhe",
                      label: "聯合",
                      children: [
                        {
                          value: "shuxue",
                          label: "數學",
                        },
                      ],
                    },
                  ],
                },
              ],
            }
         },
         methods: {
            getList(data) {
              console.log(data);
            },
         },
   }
</script>

僅顯示最後一級

可以僅在輸入框中顯示選中項最後一級的標籤，而不是選中項所在的完整路徑。

antd esign vue級聯sort_#前端_04

屬性showAll定義了是否顯示完整的路徑，將其賦值為false`則僅顯示最後一級

<template>
	<Cascader :dataSource = "dataSource" @change = "getList" :showAll = false></Cascader>
</template>
<script>
  export default {
    data() {
      return {
        dataSource: [
                {
                  value: "shejiyuanze",
                  label: "設計原則",
                  children: [
                    {
                      value: "yizhi",
                      label: "一致",
                      children: [
                        {
                          value: "tiqiu",
                          label: "踢球",
                          disabled: true,
                        },
                        {
                          value: "shuijiao",
                          label: "睡覺",
                        },
                      ],
                    },
                    {
                      value: "tuanjie",
                      label: "團結",
                      children: [
                        {
                          value: "chifan",
                          label: "吃飯",
                          disabled: true,
                        },
                      ],
                    },
                  ],
                },
                {
                  value: "kaoshiguize",
                  label: "考試規則",
                  children: [
                    {
                      value: "anjing",
                      label: "安靜",
                      children: [
                        {
                          value: "zuobi",
                          label: "作弊",
                        },
                        {
                          value: "jiaojuan",
                          label: "交卷",
                          disabled: true,
                        },
                      ],
                    },
                    {
                      value: "lianhe",
                      label: "聯合",
                      children: [
                        {
                          value: "shuxue",
                          label: "數學",
                        },
                      ],
                    },
                  ],
                },
              ],
            }
         },
         methods: {
            getList(data) {
              console.log(data);
            },
         },
   }
</script>

可搜索

可以快捷地搜索選項並選擇。

antd esign vue級聯sort_#vue_05

設置avaSearch屬性，即可開啓搜索功能。

<template>
	<Cascader :dataSource = "dataSource" @change = "getList" avaSearch></Cascader>
</template>
<script>
  export default {
    data() {
      return {
        dataSource: [
                {
                  value: "shejiyuanze",
                  label: "設計原則",
                  children: [
                    {
                      value: "yizhi",
                      label: "一致",
                      children: [
                        {
                          value: "tiqiu",
                          label: "踢球",
                          disabled: true,
                        },
                        {
                          value: "shuijiao",
                          label: "睡覺",
                        },
                      ],
                    },
                    {
                      value: "tuanjie",
                      label: "團結",
                      children: [
                        {
                          value: "chifan",
                          label: "吃飯",
                          disabled: true,
                        },
                      ],
                    },
                  ],
                },
                {
                  value: "kaoshiguize",
                  label: "考試規則",
                  children: [
                    {
                      value: "anjing",
                      label: "安靜",
                      children: [
                        {
                          value: "zuobi",
                          label: "作弊",
                        },
                        {
                          value: "jiaojuan",
                          label: "交卷",
                          disabled: true,
                        },
                      ],
                    },
                    {
                      value: "lianhe",
                      label: "聯合",
                      children: [
                        {
                          value: "shuxue",
                          label: "數學",
                        },
                      ],
                    },
                  ],
                },
              ],
            }
         },
         methods: {
            getList(data) {
              console.log(data);
            },
         },
   }
</script>

Attributes

參數

説明

類型

可選值

默認值

dataSource

用於展示的數據源

Array

——

——

disabled

是否禁用某一選項

boolean

true / false

false

clearable

是否支持清空選項

boolean

true / false

false

showAll

輸入框中是否顯示選中值的完整路徑

boolean

true / false

false

avaSearch

是否支持搜索

boolean

true / false

false

change

最後一層節點被選中的回調，以數組返回三項

event

——

——