vue-element 多选框实现单选

最新推荐文章于 2025-06-04 11:50:19 发布

原创最新推荐文章于 2025-06-04 11:50:19 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Element UI的el-table-column和type='selection'属性实现多选框单选功能。通过自定义cellnames方法和checkstyle样式，隐藏全选框并用文字替代，同时提供了showRow判断方法来控制单选和取消选中状态。这是一种实用的前端表格操作技巧，旨在帮助开发者提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多选框实现单选，取消全选，取消选中

<el-table  ref="tables" 
	:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border size="mini"
	:header-cell-style="{'text-align':'center'}" :height="tableHeight"
	:header-cell-class-name="cellnames"
	@row-click="showRows">
	
	<el-table-column fixed align="center" 
	type="selection" width="55"></el-table-column>

多选框采用element-ui中el-table-column的type属性中的selection：

<el-table-column fixed align="center" 
	type="selection" width="55"></el-table-column>

同时在el-table上加入如下代码：

<el-table :header-cell-class-name="cellnames"
	@row-click="showRows">

cellnames是定义的一个方法：

data() {
	return {
		keysid:-1,
		}
},
methods:{
cellnames(row) {
	if (row.columnIndex === 0) {
		return "checkstyle"
	}
},
showRows(row) {
	var rows = this.tableData.indexOf(row);
	if(this.keysid != rows){
		this.$refs.tables.clearSelection();
		this.keysid = rows;
		this.$refs.tables.toggleRowSelection(row);
	}
	else if(this.keysid == rows){
		this.keysid = -1;
		this.$refs.tables.clearSelection();
		}
	},
}

checkstyle是返回的样式(通过将全选框隐藏，然后将文字通过定位放在全选框的位置上)：

<style>
	.el-table /deep/.checkstyle.cell .el-checkbox__inner {
		display: none;
		position: relative;
	}

	.el-table /deep/.checkstyle.cell:before {
		content: '选择';
		position: absolute;
		right: 11px;
	}
</style>