vue+element+table多选手动取消选中

Posted 2022-02-03 web半晨

目录

• 1、HTML部分
• 2、JavaScript部分

---

1、html部分

<el-table
	ref="refSelect"
	:data="dataList"
	@select="selectRow"
	@select-all="selectAll"
>
	<el-table-column type="selection" width="55" align="center"></el-table-column>
	<el-table-column label="姓名" align="center" prop="names" />
	<el-table-column label="年龄" align="center" prop="age" />
	<el-table-column label="类型" align="center" prop="type" />
	<el-table-column label="状态" align="center" prop="status">
		<template slot-scope="scope">
			<span> scope.row.status == 0 ? "在线" : "离线" </span>
		</template>
	</el-table-column>
</el-table>

---

2、javascript部分

export default 
	data() 
		return 
			dataList: [
				
					id: 1,
					names: '半晨',
					age: 24,
					type: 1,
					status: 0
				,
				
					id: 2,
					names: '舒冬',
					age: 37,
					type: 1,
					status: 1
				,
				
					id: 3,
					names: '舒晨',
					age: 36,
					type: 2,
					status: 1
				
			],
			selectValue: []
		
	,

	methods: 
		// 单行选择
		selectRow(row) 
			this.handleSelect(row);
		,

		// 全选/反全选
		selectAll(row) 
			this.handleSelect(row);
		,

		// 处理选择
		handleSelect(row) 
			row.reduce((beforeVal, afterVal) => 
				if (beforeVal.type != afterVal.type) 
					row = [];
					this.selectValue = [];
					this.$refs.refSelect.clearSelection();
					return this.$message.warning("请选择相同类型的数据");
				
				this.selectValue = row;
				return afterVal;
			);