element表格table进行单选操作

标签代码–其中有个函数 @selection-change="selectstation"
还有个ref=''

<el-table class="th-bg" max-height="380" :data="allstation"
					  ref="listTable"
					  @selection-change="selectstation">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" prop="name">
					<span slot-scope="scope">{{scope.$index + 1}}</span>
				</el-table-column>
				<el-table-column label="加注站名称" prop="number">
					<span slot-scope="scope">{{scope.row.siteName || '无数据'}}</span>
				</el-table-column>
				<el-table-column label="加注站地址" prop="number">
					<span slot-scope="scope">{{scope.row.siteAddress || "无数据"}}</span>
				</el-table-column>
			</el-table>

界面–有选项按钮了

上js代码

//表格单选
			selectstation(val) {
				if (val.length > 1) {
					this.$refs.listTable.clearSelection();
					this.$refs.listTable.toggleRowSelection(val.pop());
					return;
				}
				if(val[0]){
					this.selectstationid = val[0].id;
					this.selectstationname = val[0].siteName;
				}else{
					this.selectstationid = '';
					this.selectstationname = '选择加注站';
				}
			},

看网上的代码，这里面有个很坑的东西就是第一次进行选择的时候确实没问题，很多时候测试一下第一次没问题就不出错了~这里进入雷区了！后面我再次测试的时候点击第二项,console.log(val)，发现不是那么回事，console.log连续执行三次，并且最后一次抛出不是你所点击的那一行数据。这里我进行判断if(val[0])用了return；结束了多次执行。成功！！