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;结束了多次执行。成功!!

如果对朋友们有所帮助,点个赞吧~qaq

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吴大大逛博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值