Element+Vue实现table单选

Element+Vue实现table单选

Element+Vue构建前台页面，Element的table组件无法实现单选功能，以下通过改写实现table的单选功能。

效果图

html

<el-table 
          		class="tb"
				ref="multipleTable"  
				:data="productlist" 
				@select="select" 
				@selection-change="handle_selectionChange" 
				:header-cell-style="{background:'#F4F4F4'}" 
				border >
				<el-table-column type="selection"  width="80" >el-table-column>
				<el-table-column label="图片" prop="productCoverNameUUID" >
					<template slot-scope="scope">
						<img :src="scope.row.productCoverNameUUID" class="alterImg">
					template>
				el-table-column>
				<el-table-column label="产品名称" prop="productName">el-table-column>
			el-table>

data

productlist: [],	// 表格数据
selectedList: [], // 选中数据

methods

		// 当用户手动勾选数据行的 Checkbox 时触发的事件,确保只能选中一项数据
		select(selection, row){	
			this.$refs.multipleTable.clearSelection();
			if(selection.length == 0) return ;
			this.$refs.multipleTable.toggleRowSelection(row, true);
		},
        // 当选择项发生变化时会触发该事件，进行赋值
		handle_selectionChange(row) {
			this.selectedList =row;
        }

style

/*隐藏表头复选框*/
.tb .el-table__header .el-table-column--selection .cell .el-checkbox {
display:none
}