elementui级联

elementui级联组件使用指南

Element UI 的级联选择器（Cascader）适用于需要选择层级结构数据的场景，例如省市区选择、分类选择等。以下是详细使用方法：

基本用法

安装 Element UI 后，在组件中引入 Cascader：

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

<script>
  export default {
    data() {
      return {
        selectedOptions: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则'
          }]
        }]
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

可配置选项

禁用选项 在数据源中设置 disabled 字段可禁用特定选项：

{
  value: 'zhinan',
  label: '指南',
  disabled: true
}

动态加载 通过 lazy 属性和 lazyLoad 方法实现动态加载子节点：

<el-cascader :props="props"></el-cascader>

<script>
  export default {
    data() {
      return {
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const { level } = node;
            // 异步加载逻辑
          }
        }
      };
    }
  };
</script>

常用属性

• v-model：绑定当前选中值
• options：级联数据源
• props：配置选项，可自定义字段名
• show-all-levels：是否显示完整路径
• filterable：是否可搜索过滤
• clearable：是否可清空选择

自定义样式

通过 popper-class 属性可自定义下拉框样式：

<el-cascader popper-class="my-cascader"></el-cascader>

<style>
.my-cascader {
  /* 自定义样式 */
}
</style>

注意事项

1. 数据源需为包含 value 和 label 字段的数组
2. 动态加载时需确保接口返回符合格式的数据
3. 移动端使用时建议结合 popup 组件优化体验
4. 大数据量时考虑使用虚拟滚动优化性能