vue+element+table只循环一次改变新数组与旧数组的值，新数组是从旧数组里面分出来，也就是多选对象引用类型特性的使用

Posted 2022-01-08 web半晨

目录

• 1、Html部分
• 2、JavaScript部分
• 3、完整代码

---

1、html部分

<div id="app">
	<el-table :data="tableData" border @selection-change="handleSelectionChange">
		<el-table-column type="selection"></el-table-column>
		<el-table-column prop="name" label="姓名"></el-table-column>
		<el-table-column prop="age" label="年龄" show-overflow-tooltip></el-table-column>
	</el-table>

	<el-select style="margin-top: 3em" v-model="selectedVal" placeholder="请选择" @change="changeSelected">
		<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value">
		</el-option>
	</el-select>
</div>

---

需要导入以下文件

<link rel="stylesheet" href="/node_modules/element-ui/lib/theme-chalk/index.css">
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="/node_modules/element-ui/lib/index.js"></script>

---

2、javascript部分

new Vue(
	el: "#app",
	data() 
		return 
			tableData: [
				
					id: 1,
					name: '张三',
					age: 15
				,
				
					id: 2,
					name: '李四',
					age: 16
				,
				
					id: 3,
					name: '王五',
					age: 17
				,
				
					id: 4,
					name: '赵六',
					age: 18
				,
				
					id: 5,
					name: '田七',
					age: 19
				
			],
			multipleSelection: [],
			options: [
				
					id: 1,
					value: 1,
					label: 'value1'
				,
				
					id: 2,
					value: 2,
					label: 'value2'
				,
				
					id: 3,
					value: 3,
					label: 'value3'
				,
				
					id: 4,
					value: 4,
					label: 'value4'
				,
				
					id: 5,
					value: 5,
					label: 'value5'
				
			],
			selectedVal: null
		
	,

	methods: 
		// 表格多选
		handleSelectionChange(val) 
			this.multipleSelection = val;
		,

		// 选择框触发
		changeSelected(e) 
			// 利用了对象的引用类型特性
			// 因为使用的是同一个地址
			// 所以被选中的新数组改变了
			// 旧数组也会跟着改变
			this.multipleSelection.forEach(item => 
				item.age = item.age + e;
			);
		
	
);

---

3、完整代码

gitee(码云) - mj01分支 - referenceAddress 文件夹