element中el-cascader如何使用

Element中el-cascader如何使用

1. 概述

el-cascader 是 Element UI 組件庫中的一個級聯選擇器組件，用于處理多級聯動選擇數據的場景。它通常用于選擇省市區、分類目錄等具有層級結構的數據。el-cascader 提供了豐富的配置選項和事件，能夠滿足大多數級聯選擇的需求。

本文將詳細介紹 el-cascader 的使用方法，包括基本用法、配置選項、事件處理、自定義內容、動態加載數據等。

2. 基本用法

2.1 安裝 Element UI

在使用 el-cascader 之前，首先需要安裝 Element UI。如果你還沒有安裝 Element UI，可以通過以下命令進行安裝：

npm install element-ui --save

然后在你的 Vue 項目中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2.2 基本示例

以下是一個簡單的 el-cascader 示例：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: '江蘇',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'zhonghuamen',
                  label: '中華門',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

在這個示例中，我們定義了一個 el-cascader 組件，并通過 v-model 綁定了 selectedOptions 數據。options 屬性用于配置級聯選擇器的選項，@change 事件用于監聽選擇變化。

2.3 數據格式

el-cascader 的 options 屬性需要傳入一個數組，數組中的每個對象代表一個選項。每個選項對象包含以下屬性：

• value: 選項的值，通常是字符串或數字。
• label: 選項的顯示文本。
• children: 子選項數組，用于表示層級結構。

3. 配置選項

el-cascader 提供了豐富的配置選項，以下是一些常用的配置：

3.1 props

props 屬性用于自定義選項的字段名。默認情況下，el-cascader 使用 value、label 和 children 作為選項的字段名。如果你需要自定義這些字段名，可以使用 props 屬性。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :props="{ value: 'id', label: 'name', children: 'sub' }"
></el-cascader>

在這個示例中，我們將 value 字段名改為 id，label 字段名改為 name，children 字段名改為 sub。

3.2 show-all-levels

show-all-levels 屬性用于控制是否在輸入框中顯示所有級別的選項。默認值為 true，即顯示所有級別的選項。如果設置為 false，則只顯示最后一級的選項。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :show-all-levels="false"
></el-cascader>

3.3 collapse-tags

collapse-tags 屬性用于控制多選模式下是否折疊標簽。默認值為 false，即不折疊標簽。如果設置為 true，則超出顯示范圍的標簽會被折疊。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :collapse-tags="true"
></el-cascader>

3.4 filterable

filterable 屬性用于控制是否啟用搜索功能。默認值為 false，即不啟用搜索功能。如果設置為 true，則用戶可以通過輸入框搜索選項。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :filterable="true"
></el-cascader>

3.5 separator

separator 屬性用于設置選項之間的分隔符。默認值為 '/'。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :separator="'-'"
></el-cascader>

3.6 clearable

clearable 屬性用于控制是否顯示清除按鈕。默認值為 false，即不顯示清除按鈕。如果設置為 true，則用戶可以通過點擊清除按鈕清空選擇。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :clearable="true"
></el-cascader>

3.7 disabled

disabled 屬性用于控制是否禁用級聯選擇器。默認值為 false，即不禁用。如果設置為 true，則級聯選擇器將被禁用。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :disabled="true"
></el-cascader>

4. 事件處理

el-cascader 提供了多個事件，用于監聽用戶的操作。以下是一些常用的事件：

4.1 change

change 事件在用戶選擇選項時觸發。事件處理函數會接收到兩個參數：value 和 selectedOptions。value 是當前選中的值數組，selectedOptions 是當前選中的選項數組。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  @change="handleChange"
></el-cascader>

<script>
export default {
  methods: {
    handleChange(value, selectedOptions) {
      console.log('Selected value:', value);
      console.log('Selected options:', selectedOptions);
    },
  },
};
</script>

4.2 expand-change

expand-change 事件在用戶展開或收起某個選項時觸發。事件處理函數會接收到一個參數 activePanels，表示當前展開的面板數組。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  @expand-change="handleExpandChange"
></el-cascader>

<script>
export default {
  methods: {
    handleExpandChange(activePanels) {
      console.log('Active panels:', activePanels);
    },
  },
};
</script>

4.3 visible-change

visible-change 事件在級聯選擇器的下拉框顯示或隱藏時觸發。事件處理函數會接收到一個布爾值參數 visible，表示下拉框是否可見。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  @visible-change="handleVisibleChange"
></el-cascader>

<script>
export default {
  methods: {
    handleVisibleChange(visible) {
      console.log('Dropdown visible:', visible);
    },
  },
};
</script>

5. 自定義內容

el-cascader 允許你通過插槽自定義選項的內容。以下是一些常用的插槽：

5.1 default

default 插槽用于自定義選項的內容。你可以在這個插槽中定義選項的顯示方式。

<el-cascader
  v-model="selectedOptions"
  :options="options"
>
  <template #default="{ node, data }">
    <span>{{ data.label }}</span>
    <span v-if="node.isLeaf"> (Leaf)</span>
  </template>
</el-cascader>

在這個示例中，我們通過 default 插槽自定義了選項的顯示內容，并在葉子節點后面添加了 (Leaf) 文本。

5.2 empty

empty 插槽用于自定義無選項時的顯示內容。

<el-cascader
  v-model="selectedOptions"
  :options="[]"
>
  <template #empty>
    <span>No options available</span>
  </template>
</el-cascader>

在這個示例中，我們通過 empty 插槽自定義了無選項時的顯示內容。

6. 動態加載數據

el-cascader 支持動態加載數據，即當用戶展開某個選項時，才加載該選項的子選項。你可以通過 lazy 屬性和 lazyLoad 方法實現動態加載數據。

<el-cascader
  v-model="selectedOptions"
  :props="props"
  :lazy="true"
  @lazy-load="loadData"
></el-cascader>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((_, index) => ({
              value: `${level}-${index}`,
              label: `Option ${level}-${index}`,
              leaf: level >= 2,
            }));
            resolve(nodes);
          }, 1000);
        },
      },
    };
  },
  methods: {
    loadData(node, resolve) {
      this.props.lazyLoad(node, resolve);
    },
  },
};
</script>

在這個示例中，我們通過 lazy 屬性啟用了動態加載數據功能，并通過 lazyLoad 方法實現了數據的動態加載。lazyLoad 方法會在用戶展開某個選項時觸發，并加載該選項的子選項。

7. 總結

el-cascader 是 Element UI 中一個功能強大的級聯選擇器組件，適用于處理多級聯動選擇數據的場景。通過本文的介紹，你應該已經掌握了 el-cascader 的基本用法、配置選項、事件處理、自定義內容以及動態加載數據的方法。

在實際開發中，你可以根據具體需求靈活使用 el-cascader 的各種功能，以滿足不同的業務場景。希望本文對你有所幫助，祝你在使用 el-cascader 時能夠得心應手！