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 时能够得心应手！