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

最新推荐文章于 2025-06-29 22:18:35 发布

原创最新推荐文章于 2025-06-29 22:18:35 发布 · 1.2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

Vue 专栏收录该内容

28 篇文章

订阅专栏

该博客介绍如何在Vue中实现动态加载元素并有效绑定事件，利用事件委托策略，将点击事件绑定到父级TR元素上，提高效率。内容涉及到Vue组件的交互和API的封装使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

}