目录

• 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 文件夹