如何在Vue.js和ElementUI框架中获取Collapse组件最后选中的值

最新推荐文章于 2024-07-31 14:10:48 发布

翱翔天地

最新推荐文章于 2024-07-31 14:10:48 发布

阅读量3.1k

点赞数 2

分类专栏： Vue知识大全文章标签： Vue.js ElementUI Collapse

本文链接：https://blog.csdn.net/you23hai45/article/details/103627643

版权

本文详细介绍了在Vue.js和ElementUI项目中，如何在使用Collapse组件时获取最后选中的值。通过分析组件返回值的形式，处理结果并展示页面效果，最终实现对 Collapse 组件的值的有效获取。文章还涵盖了设置默认值和针对accordion属性的处理方法。

摘要由CSDN通过智能技术生成

1、问题描述

在Vue.js + ElementUI组合框架搭建的项目中，如果要使用Collapse组件，获取对应最后选中项目的值，该如何实现呢？首先，需要判断点击了多个，Collapse组件返回值是什么形式的；然后，根据具体的值，对结果进行处理；最后，获取最后选中的项目值。

2、实现源码

2.1 组件

AccordComponents.vue

<template>
	<el-row :gutter="20">
		<el-col :span="12">
			<el-collapse v-model="selectedItem" @change="showCollapse">
				<el-collapse-item title="星期一" name="Monday">
					<div>星期一</div>
				</el-collapse-item>
				<el-collapse-item title="星期二" name="Tuesday">
					<div>星期二</div>
				</el-collapse-item>
				<el-collapse-item title="星期三" name="Wednesday">
					<div>星期三</div>
				</el-collapse-item>
				<el-collapse-item title="星期四" name="Thursday">
					<div>星期四</div>
				</el-collapse-item>
				<el-collapse-item title="星期五" name="Friday">
					<div>星期五</div>
				</el-collapse-item>
				<el-collapse-item title="星期六" name="Saturday">
					<div>星期六</div>
				</el-collapse-item>
				<el-collapse-item title="星期日" name="Sunday">
					<div>星期日</div>
				</el-collapse-item>
			</el-collapse>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		data() {
			return {
				selectedItem: 'Monday'
			}
		},
		methods:{
			showCollapse(val) {
				console.log(val)
			}
		}
	}
</script>

<style>
</style>