关于element ui中el-cascader的使用方式

下面就是对于关于Element UI中el-cascader的使用方式的详细讲解攻略：

1. 概述

el-cascader是一种级联选择器，它可以让用户选择特定的数据。el-cascader支持输入、筛选和异步加载选项，它可以很方便的呈现层级关系。本文将从以下几个方面详细讲解el-cascader的使用方式：

1. el-cascader的安装
2. el-cascader的基本使用
3. el-cascader的属性和事件

2. el-cascader的安装

在使用el-cascader之前，我们需要先安装Element UI。在我们的项目中，可以使用npm或者yarn进行安装：

# 使用npm进行安装
npm i element-ui -S

# 使用yarn进行安装
yarn add element-ui

安装完成后，在main.js中引入Element UI：

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

Vue.use(ElementUI);

3. el-cascader的基本使用

在我们引入了Element UI之后，就可以使用el-cascader组件了。下面是一个基本的el-cascader组件的示例：

<template>
  <div>
    <el-cascader :options="options" v-model="selectedCities"></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCities: [],
      options: [{
        value: 'zhongguo',
        label: '中国',
        children: [{
          value: 'sichuan',
          label: '四川',
          children: [{
            value: 'chengdu',
            label: '成都'
          }, {
            value: 'deyang',
            label: '德阳'
          }]
        }, {
          value: 'guizhou',
          label: '贵州',
          children: [{
            value: 'guiyang',
            label: '贵阳'
          }]
        }]
      }]
    }
  }
}
</script>

上述代码会渲染一个el-cascader组件，并且渲染的数据是options中的数据。我们可以看到，这个组件中定义了一个options数组，这个数组中包含了一些数据，这些数据代表了这个级联选择器的各级数据。同时，在el-cascader中我们使用了v-model来控制用户所选的值。这个值会被作为selectedCities的值，当用户选择某个值的时候，这个值会被更新。

4. el-cascader的属性和事件

在使用el-cascader的时候，我们可以使用一些属性和事件来控制它的行为。下面提供两个示例，以帮助你更好地了解这些属性和事件。

示例一：根据输入进行筛选

在el-cascader中，我们可以通过设置filterable属性来开启输入框用于筛选数据，当输入一个特定的关键字后，可以自动筛选出符合条件的数据。下面我们来看一下如何使用这个属性：

<template>
  <div>
    <el-cascader :options="options" v-model="selectedCities" :filterable="true" :show-all-levels="false"></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCities: [],
      options: [{
        value: 'zhongguo',
        label: '中国',
        children: [{
          value: 'sichuan',
          label: '四川',
          children: [{
            value: 'chengdu',
            label: '成都'
          }, {
            value: 'deyang',
            label: '德阳'
          }]
        }, {
          value: 'guizhou',
          label: '贵州',
          children: [{
            value: 'guiyang',
            label: '贵阳'
          }]
        }]
      }]
    }
  }
}
</script>

在上面的代码中，我们在el-cascader中设置filterable属性为true，这样就可以使用关键字进行筛选了。

示例二：异步加载数据

在使用el-cascader的时候，有时候我们需要异步地加载数据。在这种情况下，我们可以使用lazy属性，它可以让你通过点击加载按钮才异步地加载数据。下面是一个示例：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedCities"
      :lazy="true"
      :load-data="loadData"
      :show-all-levels="false">
    </el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCities: [],
      options: [{
        value: 'zhongguo',
        label: '中国',
        children: []
      }]
    }
  },
  methods: {
    loadData(node, resolve) {
      if (node.level === 0) {
        setTimeout(() => {
          this.options[0].children = [{
            value: 'sichuan',
            label: '四川'
          }, {
            value: 'guizhou',
            label: '贵州'
          }]
          resolve(this.options[0].children)
        }, 1000)
      } else if (node.level === 1) {
        setTimeout(() => {
          if (node.data.value === 'sichuan') {
            this.options[0].children[0].children = [{
              value: 'chengdu',
              label: '成都'
            }, {
              value: 'deyang',
              label: '德阳'
            }]
            resolve(this.options[0].children[0].children)
          } else if (node.data.value === 'guizhou') {
            this.options[0].children[1].children = [{
              value: 'guiyang',
              label: '贵阳'
            }]
            resolve(this.options[0].children[1].children)
          }
        }, 1000)
      }
    }
  }
}
</script>

在上面的代码中，我们在el-cascader中设置lazy属性为true，并且设置load-data属性来异步加载数据。loadData方法会在加载数据的时候被调用，对于每一个需要加载数据的节点，我们可以根据它的层级和数据来决定需要加载什么数据，并且在加载完成后传入resolve函数中。

至此，关于el-cascader的使用方式就详细讲解完毕了。希望对大家有所帮助。