vue列表每一行添加按钮,点击按钮,进行倒计时

vue列表每一行添加按钮,点击按钮,进行倒计时

类似于获取验证码,点击后有倒计时,在这基础上进行修改,思路:页面初始渲染列表时,循环遍历列表,生成一个跟列表长度吻合的对象数组,每个对象所有两个属性,isShow: false(是否点击) leftSecond: 0(剩余时间)

html部分

 <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <button
                  size="mini"
                  class="button2"
                  v-if="!sending[scope.$index].isShow"
                  @click="call(scope,scope.row)"
                >叫号</button>
                <button
                  size="mini"
                  v-else
                  disabled
                  class="btn"
                >{{ sending[scope.$index].leftSecond }}秒</button>
              </template>
 </el-table-column>

css部分

.button2 {
  width: 77px;
  height: 26px;
  background: #2792c0;
  opacity: 1;
  border-radius: 4px;
  border: none;
  margin-right: 3px;
  color: white;
  cursor: pointer;
}
.btn {
  width: 77px;
  height: 26px;
  background: rgb(160, 207, 255);
  opacity: 1;
  border-radius: 4px;
  border: none;
  margin-right: 3px;
  color: white;
}

js部分

data(){
	return{
	  sending: [{ isShow: false, leftSecond: 0 }], //是否叫号
      second: 10, // 倒计时间
	}
}
mounted(){
	xxx(){
	//请求数据.......
	//请求成功
	if (this.tableData.length > 0) {
        this.sending = [];
        this.tableData.forEach(() => {
          this.sending.push({ isShow: false, leftSecond: 0 });
        });
        console.log("sending数组:", this.sending);
      }
	}
}
//叫号
call(scope,row){
	//防止重复提交，显示倒计时
      if (this.sending[scope.$index].isShow) return;
      this.sending[scope.$index].isShow = true;
      // 倒计时
      this.timeDown(scope.$index);
      //后续操作.......
}
//倒计时
   timeDown(index) {
      console.log("倒计时");
      this.sending[index].leftSecond = this.second;

      const timmer = setInterval(() => {
        this.sending[index].leftSecond--;
        if (this.sending[index].leftSecond <= 0) {
          //停止计时
          clearInterval(timmer);
          this.sending[index].leftSecond = 0;
          this.sending[index].isShow = false;
        }
      }, 1000);
    },