Vue动态加载元素,并给元素绑定事件

使用了事件委托的思想。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)
        }
    })
}

}

猜你喜欢

转载自blog.csdn.net/weixin_39407291/article/details/89457145