Vue之Ele多级联组件如何使用

目录

1. 引言
2. Ele多级联组件简介
3. 安装与配置
4. 基本用法
5. 数据绑定
6. 事件处理
7. 自定义选项
8. 异步加载
9. 样式定制
10. 常见问题与解决方案
11. 总结

引言

在现代前端开发中，Vue.js 因其简洁、灵活和高效的特点，成为了众多开发者的首选框架。Element UI 作为 Vue.js 的一个流行 UI 库，提供了丰富的组件，帮助开发者快速构建高质量的用户界面。其中，多级联组件（Cascader）是一个非常实用的组件，适用于需要多级选择的场景，如省市区选择、分类选择等。

本文将详细介绍如何在 Vue 项目中使用 Element UI 的多级联组件，涵盖从安装配置到高级用法的各个方面，帮助开发者全面掌握该组件的使用技巧。

Ele多级联组件简介

Element UI 的多级联组件（Cascader）是一个多级选择器，通常用于处理具有层级关系的数据。例如，选择省市区、商品分类等场景。该组件支持单选、多选、异步加载等功能，能够满足各种复杂的需求。

主要特性

• 多级选择：支持多级层级数据的选择。
• 单选与多选：支持单选和多选模式。
• 异步加载：支持异步加载子级数据。
• 自定义选项：可以自定义选项的显示内容和样式。
• 事件处理：提供丰富的事件处理机制。

安装与配置

在使用 Element UI 的多级联组件之前，首先需要安装 Element UI 库。

安装 Element UI

可以通过 npm 或 yarn 安装 Element UI：

npm install element-ui --save

或

yarn add element-ui

引入 Element UI

在 Vue 项目中引入 Element UI：

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

Vue.use(ElementUI);

引入多级联组件

在需要使用多级联组件的页面或组件中引入 el-cascader 组件：

import { ElCascader } from 'element-ui';

export default {
  components: {
    ElCascader
  }
};

基本用法

基本结构

多级联组件的基本结构如下：

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

• v-model：绑定选中的值。
• options：绑定的选项数据。
• @change：选中值变化时触发的事件。

示例代码

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

<script>
export default {
  data() {
    return {
      selectedValue: [],
      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>

运行效果

上述代码将渲染一个多级联选择器，用户可以选择省市区。选择后，选中的值会通过 v-model 绑定到 selectedValue，并在控制台输出选中的值。

数据绑定

多级联组件的数据绑定主要通过 options 属性实现。options 是一个数组，每个元素代表一个选项，选项可以包含子选项，形成多级结构。

数据结构

每个选项对象包含以下属性：

• value：选项的值。
• label：选项的显示文本。
• children：子选项数组。

示例

options: [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [
      {
        value: 'hangzhou',
        label: '杭州',
        children: [
          {
            value: 'xihu',
            label: '西湖'
          }
        ]
      }
    ]
  },
  {
    value: 'jiangsu',
    label: '江苏',
    children: [
      {
        value: 'nanjing',
        label: '南京',
        children: [
          {
            value: 'zhonghuamen',
            label: '中华门'
          }
        ]
      }
    ]
  }
]

动态绑定

可以通过异步请求动态加载选项数据：

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

<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: []
    };
  },
  mounted() {
    this.fetchOptions();
  },
  methods: {
    fetchOptions() {
      // 模拟异步请求
      setTimeout(() => {
        this.options = [
          {
            value: 'zhejiang',
            label: '浙江',
            children: [
              {
                value: 'hangzhou',
                label: '杭州',
                children: [
                  {
                    value: 'xihu',
                    label: '西湖'
                  }
                ]
              }
            ]
          },
          {
            value: 'jiangsu',
            label: '江苏',
            children: [
              {
                value: 'nanjing',
                label: '南京',
                children: [
                  {
                    value: 'zhonghuamen',
                    label: '中华门'
                  }
                ]
              }
            ]
          }
        ];
      }, 1000);
    },
    handleChange(value) {
      console.log('选中的值:', value);
    }
  }
};
</script>

事件处理

多级联组件提供了丰富的事件处理机制，常用的有 change、expand-change 等。

change 事件

change 事件在用户选择值发生变化时触发，回调函数接收选中的值作为参数。

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

<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('选中的值:', value);
    }
  }
};
</script>

expand-change 事件

expand-change 事件在展开或收起子选项时触发，回调函数接收当前展开的节点数组作为参数。

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

<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleExpandChange(nodes) {
      console.log('展开的节点:', nodes);
    }
  }
};
</script>

自定义选项

多级联组件支持自定义选项的显示内容和样式，可以通过 scoped slot 实现。

自定义选项内容

使用 scoped slot 自定义选项内容：

<template>
  <el-cascader
    v-model="selectedValue"
    :options="options">
    <template slot-scope="{ node, data }">
      <span>{{ data.label }}</span>
      <span v-if="!node.isLeaf"> ({{ data.children.length }})</span>
    </template>
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖'
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

自定义选项样式

可以通过 scoped slot 和 CSS 自定义选项样式：

<template>
  <el-cascader
    v-model="selectedValue"
    :options="options">
    <template slot-scope="{ node, data }">
      <span class="custom-label">{{ data.label }}</span>
    </template>
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖'
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.custom-label {
  color: red;
  font-weight: bold;
}
</style>

异步加载

多级联组件支持异步加载子级数据，适用于数据量较大或需要动态加载的场景。

异步加载示例

<template>
  <el-cascader
    v-model="selectedValue"
    :props="props">
  </el-cascader>
</template>

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

运行效果

上述代码将渲染一个异步加载的多级联选择器，用户展开选项时会延迟 1 秒加载子级数据。

样式定制

多级联组件的样式可以通过 CSS 进行定制，Element UI 提供了丰富的样式类名，方便开发者进行样式覆盖。

自定义样式示例

<template>
  <el-cascader
    v-model="selectedValue"
    :options="options"
    class="custom-cascader">
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖'
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.custom-cascader .el-cascader-menu {
  background-color: #f5f5f5;
}

.custom-cascader .el-cascader-node.is-selectable {
  color: #409eff;
}

.custom-cascader .el-cascader-node.is-active {
  color: #67c23a;
}
</style>

运行效果

上述代码将渲染一个自定义样式的多级联选择器，背景色为浅灰色，可选项颜色为蓝色，选中项颜色为绿色。

常见问题与解决方案

1. 如何清空选中的值？

可以通过设置 v-model 绑定的值为空数组来清空选中的值：

this.selectedValue = [];

2. 如何禁用多级联组件？

可以通过 disabled 属性禁用多级联组件：

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

3. 如何设置默认值？

可以通过设置 v-model 绑定的值为默认值：

data() {
  return {
    selectedValue: ['zhejiang', 'hangzhou', 'xihu'],
    options: [
      {
        value: 'zhejiang',
        label: '浙江',
        children: [
          {
            value: 'hangzhou',
            label: '杭州',
            children: [
              {
                value: 'xihu',
                label: '西湖'
              }
            ]
          }
        ]
      }
    ]
  };
}

4. 如何限制选择的层级？

可以通过 props 的 checkStrictly 属性限制选择的层级：

<el-cascader
  v-model="selectedValue"
  :options="options"
  :props="{ checkStrictly: true }">
</el-cascader>

5. 如何自定义选项的显示字段？

可以通过 props 的 label 和 value 属性自定义选项的显示字段：

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

总结

Element UI 的多级联组件是一个非常实用的组件，适用于各种需要多级选择的场景。通过本文的介绍，相信你已经掌握了该组件的基本用法和高级技巧。在实际开发中，可以根据需求灵活运用这些技巧，构建出更加丰富和高效的用户界面。

希望本文对你有所帮助，祝你在 Vue 开发中取得更大的成功！