跟随Element学习Vue小技巧(14)——Cascader

前端

2023-10-18 10:49:56

好的，以下是根据您的输入使用 AI Spiral Creator 撰写生成的文章：

跟随Element学习Vue小技巧(14)——Cascader

在实际开发中，级联选择器是一个非常有用的组件，它可以在不同级别的数据集中快速过滤和选择。在本文中，我们将使用Element UI库来创建一个级联选择器，并展示它的一些常用功能。

Cascader组件介绍

Cascader组件提供了一个多级菜单，可以方便地实现级联选择。它支持动态加载数据，并可以自定义节点的内容和格式。

基本用法

创建一个基本Cascader组件非常简单，只需要在Vue组件中添加如下代码：

<template>
  <el-cascader
    v-model="value"
    :options="options"
    placeholder="选择地区"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          label: '中国',
          value: 'china',
          children: [
            {
              label: '北京',
              value: 'beijing'
            },
            {
              label: '上海',
              value: 'shanghai'
            },
            {
              label: '广州',
              value: 'guangzhou'
            }
          ]
        },
        {
          label: '美国',
          value: 'usa',
          children: [
            {
              label: '纽约',
              value: 'new-york'
            },
            {
              label: '洛杉矶',
              value: 'los-angeles'
            },
            {
              label: '芝加哥',
              value: 'chicago'
            }
          ]
        }
      ]
    }
  }
}
</script>

在上面的代码中，value变量用于存储选中的级联值，options变量用于指定级联数据。

常用属性

属性	类型	默认值	说明
v-model	Array	[]	绑定级联值。
options	Array	[]	选项数据。
placeholder	String	'Please select'	输入框占位符。
size	String	'default'	组件大小。可设置为 'large' 或 'small'。
expandTrigger	String	'click'	展开菜单的触发方式。可设置为 'hover' 或 'click'。
multiple	Boolean	false	是否允许多选。
clearable	Boolean	false	是否显示清除按钮。
disabled	Boolean	false	是否禁用组件。

自定义节点

有时，您可能需要自定义级联菜单中节点的显示格式。这可以通过node-template属性来实现。

<template>
  <el-cascader
    v-model="value"
    :options="options"
    node-template="#nodeTemplate"
  ></el-cascader>

  <template id="nodeTemplate">
    <div class="node-template">
      <span>{{ node.label }}</span>
      <span class="tag">{{ node.value }}</span>
    </div>
  </template>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          label: '中国',
          value: 'china',
          children: [
            {
              label: '北京',
              value: 'beijing'
            },
            {
              label: '上海',
              value: 'shanghai'
            },
            {
              label: '广州',
              value: 'guangzhou'
            }
          ]
        },
        {
          label: '美国',
          value: 'usa',
          children: [
            {
              label: '纽约',
              value: 'new-york'
            },
            {
              label: '洛杉矶',
              value: 'los-angeles'
            },
            {
              label: '芝加哥',
              value: 'chicago'
            }
          ]
        }
      ]
    }
  }
}
</script>