FCAT

Appearance

Vue2使用 v-for 遍历对象 ​

html
<div v-for="(val, key, index) in list">
  <span>值：{{ val }}</span>
  <span>键：{{ key }}</span>
  <span>索引：{{ index }}</span>
</div>
<div v-for="(val, key, index) in list">
  <span>值：{{ val }}</span>
  <span>键：{{ key }}</span>
  <span>索引：{{ index }}</span>
</div>

Vue2使用 v-for 遍历由对象组成的数组 ​

html
<div v-for="(item,index) in objArray" :key="index">
  <span>属性值：{{ item.xxx }}</span>
</div>
<div v-for="(item,index) in objArray" :key="index">
  <span>属性值：{{ item.xxx }}</span>
</div>

使用 v-for 实现点击高亮（手风琴） ​

在不影响原始数据的情况下，实现点击高亮/展开的效果！

手风琴展开

该效果实现为 手风琴效果 ，即具有 排他性 ：点击一个元素时其他元素会恢复原状，若想实现展开效果请看下个标题

html
<template>
	<div>
		<div v-for="(val, key, index) in objArr">
			<span @click="queryAppsByCate(index)" :class="{ active: index == isActive }">{{ key }}</span>
			<div v-show="index == isActive" v-for="(item,index2) in val" :key="index2"></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0, // 定义isActive=0，默认高亮第一个元素
				objArr: {
					'班级1': [{
						name: '学生1',
						id: '1',
						age: 18,
					}, {
						name: '学生2',
						id: '2',
						age: 18,
					}, ],
					'班级2': [{
						name: '学生3',
						id: '3',
						age: 18,
					}, {
						name: '学生4',
						id: '4',
						age: 18,
					}, ],
					'班级3': [{
						name: '学生5',
						id: '5',
						age: 18,
					}, {
						name: '学生6',
						id: '6',
						age: 18,
					}, ],
				}
			}
		},
		methods: {
			queryAppsByCate(index) {
				this.isActive = index
			},
		},
	}
</script>

<style scoped>
	.active {
		color: aquamarine;
	}
</style>
<template>
	<div>
		<div v-for="(val, key, index) in objArr">
			<span @click="queryAppsByCate(index)" :class="{ active: index == isActive }">{{ key }}</span>
			<div v-show="index == isActive" v-for="(item,index2) in val" :key="index2"></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0, // 定义isActive=0，默认高亮第一个元素
				objArr: {
					'班级1': [{
						name: '学生1',
						id: '1',
						age: 18,
					}, {
						name: '学生2',
						id: '2',
						age: 18,
					}, ],
					'班级2': [{
						name: '学生3',
						id: '3',
						age: 18,
					}, {
						name: '学生4',
						id: '4',
						age: 18,
					}, ],
					'班级3': [{
						name: '学生5',
						id: '5',
						age: 18,
					}, {
						name: '学生6',
						id: '6',
						age: 18,
					}, ],
				}
			}
		},
		methods: {
			queryAppsByCate(index) {
				this.isActive = index
			},
		},
	}
</script>

<style scoped>
	.active {
		color: aquamarine;
	}
</style>

使用 v-for 实现展开 ​

展开与高亮的区别
  • 展开：展开不具有排它性，每个独立控制
  • 高亮状态：具有排它性，点击一个单位时其他单位会熄灭

需要给对象数组的每个对象都添加 show:false 属性，点击单位时获得它的index，然后使用for循环遍历，将指定对象的 show 变为 true，其他下标不等于index的对象的 show 变为 false。

使用 v-for 实现点击loading和disabled排它 ​

首先再 data()中定义一个 Active:0

html
<el-button :disabled="btn_loading && (Active !== scope.$index)"
	:loading="btn_loading && (Active == scope.$index)"
	@click="handleClick(scope.row,scope.$index)" type="text" size="small">
	点我加载
</el-button>
<script>
	export default {
	    methods:{
	    	handleClick(row, index) {
	    			this.Active = index
	    			this.btn_loading = true
	    	}
	    }
	}
</script>
<el-button :disabled="btn_loading && (Active !== scope.$index)"
	:loading="btn_loading && (Active == scope.$index)"
	@click="handleClick(scope.row,scope.$index)" type="text" size="small">
	点我加载
</el-button>
<script>
	export default {
	    methods:{
	    	handleClick(row, index) {
	    			this.Active = index
	    			this.btn_loading = true
	    	}
	    }
	}
</script>