vue element ui javascript

第一个问题：批量删除的时候循环删除每一条成功之后，让提示信息只有一个

这个只需要修改他的公共样式，定位改成绝对定位。

或者把你循环删除的最后面统计成功失败的数量再加this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' });

第二个问题：取消勾选的时候点击确定去除索引的验证

问题一：

import ElementUI, {
  Message
} from 'element-ui'
// use
class DonMessage {
  success(options, single = true) {
    this.showMessage('success', options, single)
  }
  warning(options, single = true) {
    this.showMessage('warning', options, single)
  }
  info(options, single = true) {
    this.showMessage('info', options, single)
  }
  error(options, single = true) {
    this.showMessage('error', options, single)
  }
  showMessage(type, options, single) {
    if (single) {
      // 判断是否已存在Message
      if (document.getElementsByClassName('el-message').length === 0) {
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}
Vue.use(ElementUI)
// 命名根据需要，DonMessage只是在文章中使用
Vue.prototype.$message = new DonMessage()

问题二：

在你的 验证之前对勾选状态进行判断 

1.首先,批量删除不建议用循环去删除.这样你是一次删一条其实.对于服务器压力不友好.建议改成传[id1,id2,id3...]到后台,统一删除,这样就可以只弹一个了.

2.如果你就是要循环,一次删一个.那么可以在进入方法前在循环外面定义一个标志,showReady=false.然后每次要提示时,判断是否已经提示过了就行.这样就保证了多条提示,只有一次会显示.

function deleteList(list){
    let showReady = false;
    for(let i=0;i<list.length;i++){
        httpDelete(list[i])
        if(!showReady){
            console.log("删除成功")
            showReady=true;
        }
    }    
}

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="特殊资源" prop="resource">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  </el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          resource: '',
        },
        rules: {
          resource: [
            { required: true, message: '请输入特殊资源', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
//取消勾选方法
    quxiao(){
    this.rules.resource =  { required: false}
    }
   
    }
  }
</script>

建议使用promise.all  完成循环删除的接口请求，promise.all([promise1,promise2]).then(res=>{this.$message.success("删除成功")})