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

Question

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

点击之后长这样，如下：

表格里的按钮是如下写的：

<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就打印不出来，实在不知道用什么方法了，各位走过路过不要放过，给一点点小点子吧，谢谢各位了

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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