ElementUI —— Cascader 级联选择器

作者：System 时间：2024年08月27日分类：所有,elementui 字数：1476

这篇文章距离上次修改已过222天，其中的内容可能已经有所变动。

ElementUI 的 Cascader 级联选择器是一个常用的组件，用于从一组相互连动的数据中进行选择。以下是一个简单的例子，展示如何使用 Cascader 组件：

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

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于存储选中的值
      options: [
        {
          value: 'guide',
          label: '指南',
          children: [
            {
              value: 'disciplines',
              label: '学院',
              children: [
                {
                  value: 'forestry',
                  label: '林业学院'
                },
                {
                  value: 'medicine',
                  label: '医学院'
                }
              ]
            },
            {
              value: 'technologies',
              label: '技术',
              children: [
                {
                  value: 'web-development',
                  label: '网络开发'
                },
                {
                  value: 'ai',
                  label: '人工智能'
                }
              ]
            }
          ]
        },
        {
          value: 'community',
          label: '社区'
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value); // 当选项变化时，打印出新的选项值
    }
  }
};
</script>

在这个例子中，options 是一个嵌套的对象数组，代表级联选择器的所有选项。v-model 用于双向绑定选中的值。handleChange 方法会在选项变化时被触发，并打印出新的选项值。

ElementUI —— Cascader 级联选择器

评论已关闭

推荐阅读