el-table 获取选中后的某一个值（整理）

<template>
	<div>
		<div style="display: flex; margin-bottom: 20px">
			<div v-for="item in checklist" :key="item.id" @click="del([item])">
				{{ item.name }} &nbsp;
			</div>
		</div>
		<el-table :data="tableData" ref="singleTable" highlight-current-row border class="load_table"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="70"></el-table-column>
			<el-table-column prop="id" min-width="100%" label="" align="center"></el-table-column>
			<el-table-column prop="name" min-width="100%" align="center"></el-table-column>
			<el-table-column prop="school" min-width="100%" align="center"></el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				checklist: [],
				tableData: [{
						id: 1,
						name: "123",
						school: "学校",
					},
					{
						id: 2,
						name: "张三",
						school: "学校",
					},
					{
						id: 3,
						name: "李四",
						school: "学校",
					},
					{
						id: 4,
						name: "王五",
						school: "学校",
					},
					{
						id: 6,
						name: "张六",
						school: "学校",
					},
					{
						id: 7,
						name: "刘⑦",
						school: "学校",
					},
				],
			};
		},
		mounted() {},
		methods: {
			/**
			 * 取消选中
			 */
			del(rows) {
				rows.forEach((row) => {
					this.$refs.singleTable.toggleRowSelection(row);
				});
			},

			handleSelectionChange(val) {
				this.checklist = val;
			},
		},
	};
</script>

<style lang="scss" scoped>
</style>