以下是一个简单的例子，演示如何在 Vue.js 中使用 Element Plus 的 Cascader 级联选择器：
首先，确保你已经引入了 Element Plus 库。你可以通过以下方式之一来引入：
1. 使用 npm 安装：
npm install element-plus --save
然后在你的项目中使用：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
2. 直接在 HTML 中引入：
<!-- 在你的 HTML 文件中引入 Element Plus 的 CSS 文件 -->
<link rel="stylesheet" href="path/to/element-plus/theme-chalk/index.css">
<!-- 在你的 HTML 文件中引入 Element Plus 的 JS 文件 -->
<script src="path/to/element-plus/index.js"></script>
然后，在你的 Vue 组件中使用 Cascader 级联选择器：
<template>
<div>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="props"
placeholder="请选择"
@change="handleCascaderChange"
></el-cascader>
<p>选择的选项是：{{ selectedOptions }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: 'option1',
label: '选项1',
children: [
{
value: 'option1-1',
label: '选项1-1',
children: [
{ value: 'option1-1-1', label: '选项1-1-1' },
{ value: 'option1-1-2', label: '选项1-1-2' }
]
},
{
value: 'option1-2',
label: '选项1-2',
children: [
{ value: 'option1-2-1', label: '选项1-2-1' },
{ value: 'option1-2-2', label: '选项1-2-2' }
]
}
]
},
{
value: 'option2',
label: '选项2',
children: [
{ value: 'option2-1', label: '选项2-1' },
{ value: 'option2-2', label: '选项2-2' }
]
}
// ... 添加更多的选项
],
props: {
value: 'value',
label: 'label',
children: 'children'
}
};
},
methods: {
handleCascaderChange(value) {
console.log('选择的值：', value);
}
}
}
</script>
在上述例子中，options 数组包含了级联选择器的层级结构，props 属性用于配置选项中的 value、label 和 children 字段的名称。selectedOptions 用于存储用户选择的值。
转载请注明出处：http://www.zyzy.cn/article/detail/5536/ElementPlus