问答

vue一键全点击 点击按钮 将表格里循环出来的按钮依次全部点击

作者:admin 2021-07-06 我要评论

点击一个表格内“详情”按钮查询一次详情接口,然后将查出的数据插入表格数组内,现在需求是想要一键全部加载,所以想要用dom操作click事件 点击之后长这样,如...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

点击一个表格内“详情>”按钮查询一次详情接口,然后将查出的数据插入表格数组内,现在需求是想要一键全部加载,所以想要用dom操作click事件
image.png
点击之后长这样,如下:
image.png
表格里的按钮是如下写的:

<el-table-column label="设备自定义名称" prop='equipmentName' fixed>
          <template slot-scope="scope">
            {{scope.row.equipmentName}}
            <el-button class="oneKey" type="text" v-if="scope.row.equipmentName.indexOf('合计')!==-1" @click.native="goToDetail(scope.row)" :disabled="scope.row.show">详情></el-button>
          </template>
</el-table-column>

然后在外部写了一个按钮
<el-button @click="oneKeyGet">`一键点击`</el-button>
方法是下面的这个

var onetime=document.getElementsByClassName("oneKey")
      for(var i=0,len=onetime.length;i<len;i++){
        onetime[i].addEventListener("click",function(){
          console.log(i);
        })
}

console就打印不出来,实在不知道用什么方法了,各位走过路过不要放过,给一点点小点子吧,谢谢各位了

###

你的oneKeyGet只是为onetime元素们绑定事件,并没有触发事件。而且并没有注销事件,这么做会有很大的隐患。

你触发点击事件是为了拿到表格行数据,再去服务器请求数据,但是vue是数据驱动的,你已经有数据,为什么还要这么折腾呢?所以你可以直接遍历表格数据,去服务器请求数据。

tableData.forEach(item => myAjax(..).then(...))
//或者
Promise.all(tableData.map(item => myAjax(..))).then(...)

从浏览器请求限制考虑,还可以和后台商量,更改接口,达到一次请求多种数据。

###

chrome对部分脚本模拟的连续交互操作有拦截,使用代码多次点击应该也是不允许的
而且你注册这么多事件监听有考虑怎么注销吗?
对每个按钮点击后绑定的方法可以在一键点击按钮点击后依次调用一遍,不用模拟所有按钮都点一次

###

不需要去模拟dom点击事件,最终仍然是调用查询函数,你每行数据肯定存在一个数组,遍历此数组依次调用其查询方法即可

###

点击后,直接遍历表格的list,并同步调用goToDetail这个方法就行了

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue一键全点击 点击按钮 将表格里循环

    vue一键全点击 点击按钮 将表格里循环

  • 如何在 windows 上测试 JavaScriptCore

    如何在 windows 上测试 JavaScriptCore

  • promise all 会受 chrome 6个http的限

    promise all 会受 chrome 6个http的限

  • 云服务遇到的一些问题很困惑

    云服务遇到的一些问题很困惑

腾讯云代理商
海外云服务器