使用了事件委托的思想。td的点击事件,加到父级tr身上。
结构:
<table class="table">
<thead class="table_head">
<tr>
<th>序号</th>
<th>门店名</th>
<th>进件状态</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tbodyArr" @click="linkToDataInput(index)">
<td>{{ ((index+1)+((currentPage-1)*10)) }}</td>
<td>{{ item.branchname }}</td>
<td>{{ item.status }}</td>
<td>{{ item.updatetime }}</td>
</tr>
</tbody>
</table>
在methods中:
methods:{
rendertable(){
var data = {
access_code: this.access_code,
originoperation:'0' ,//必传
servercode:'', // 服务商登录时必传
branchcode : this.branchcode ,
status : this.inStateSelectvalue ,
starttime : this.starttime ,
endtime : this.endtime ,
pageSize : this.pageSize , //需和后台确定参数名
currentPage:this.currentPage //需和后台确定参数名
};
api.allAxios(this,'queryApplyList',data, (res)=>{
this.currentPage = res.data.data.page ;
this.pageSize = res.data.data.pageSize ;
this.countPage = Math.ceil(res.data.data.totalRecords / res.data.data.pageSize) ;
this.tbodyArr = res.data.data.list;
});
},
**res返回的数据,包裹了一次data。**
api.allAxios封装函数。
function allAxios(_this, url, data, resp, method = 'post') {
let beginDate = new Date().valueOf();
url = baseUrl + allApi[url]
data['zl-request-test'] = '18705668960'
axios({
url: url,
data: _this.$qs.stringify(data),
method: method
}).then(res => {
let resutname = res.data.success == 0 ? 'failed' : 'success',
endDate = new Date().valueOf(),
timeLong = endDate - beginDate,
responseURL = encodeURIComponent(res.request.responseURL),
img = `http://hm.zhonglunnet.com/hm.gif?type=intfanalysis&source=pos&t=${beginDate}&url=${responseURL}&handtime=${timeLong}&result=${resutname}`;
if (res.data.success == 0) {
_this.$toast({
message: res.data.errorMsg,
duration: 1000
})
} else {
_this.images_url = img;
resp(res, img)
}
})
}
}