标签代码–其中有个函数 @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