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

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>

2.2 引入组件

<template>
  <div id="app">
    <!-- <epie2-d></epie2-d>
	<parent-to-child pmsg="父级传值到子级"></parent-to-child> -->
	<accord-components></accord-components>
  </div>
</template>

<script>
import FusionCharts from './components/Bar3D.vue'
import LineChart from './components/Line.vue'
import Column3DChart from './components/Column3D.vue'
import ColumnChart from './components/Column2D.vue'
import ColumnClick from './components/ColumnClick.vue'
import Collapses from './components/Collapses.vue'
import TableChart from './components/TableChart.vue'
import Container from './components/Container.vue'
import Blog from './components/Blog.vue'
import Arm from './components/Arm.vue'
import Ecolumn2D from './components/echarts/Ecolumn2D.vue'
import Epie2D from './components/echarts/Epie2D.vue'
import Mixers from './components/echarts/mixer.vue'
import ParentToChild from './components/values/ParentToChild'
import AccordComponents from './components/AccordComponents.vue'

export default {
  name: 'app',
  components: {
	ParentToChild,
    FusionCharts,
	LineChart,
	Column3DChart,
	ColumnChart,
	ColumnClick,
	Collapses,
	TableChart,
	Container,
	Blog,
	Arm,
	Ecolumn2D,
	Epie2D,
	AccordComponents
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

3 实现效果

3.1 页面效果

页面效果

3.2 点击效果

点击效果

3.3 打印结果

打印结果

4 改进代码

<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) {
				let selectedChild = val[val.length-1]
				console.log(selectedChild)
			}
		}
	}
</script>

<style>
</style>

5 改进效果

5.1 页面效果

页面效果

5.2 打印结果

打印结果

6 设置默认值

<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) {
				let selectedChild = val[val.length-1] || 'Monday'
				console.log(selectedChild)
			}
		}
	}
</script>

<style>
</style>

7 修复代码

如果el-collapse添加属性accordion，就不能像上面那样取值了，直接在change事件中取val就行

<template>
	<el-row :gutter="20">
		<el-col :span="12">
			<el-collapse v-model="selectedItem" @change="showCollapse" accordion>
				<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) {
				let selectedChild = val || 'Monday'
				console.log(selectedChild)
			}
		}
	}
</script>

<style>
</style>