• 用ele-ui做表格展示时常用到的操作功能


    一些常用的功能会用到的如下:

      <el-button v-show="scope.row.state !== 1" type="text" size="small" @click="startB(scope.row)">启用</el-button>
              <el-button v-show="scope.row.state !== 0" type="text" size="small" @click="end(scope.row)"  >禁用</el-button>
               <span class="dropDownF" v-if="scope.row.alertFlag">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    更多
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">
                      <el-button type="text" size="small" @click="alertHistory(scope.row)" >告警历史</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item command="2">
                      <el-button type="text" size="small" @click="del(scope.row)" >删除</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span> 

    对以上操作会用到的方法是:

    startB(row) {
          this.$confirm('确定要启用这条告警规则吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal:false,
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = '执行中...';
                // let req = {
                //   id: row.id,
                //   adminEmail: this.$store.state.user.userMail,
                //   userId:this.$store.state.user.userId,
                //   clusterJson:row.clusterJson
                // }
                let req = {
                  ids: row.id,
                  adminEmail: this.$store.state.user.userMail,
                 //userId:this.$store.state.user.userId,
                  names: row.alert
                }
                 this.$http.startMonitor(req).then((res) => {
                //   done();
                //   instance.confirmButtonLoading = false;
                //   if (res && res.data.state=='success') {
                //     this.$popSuccess('启用告警规则成功')
                //     this.search()
                //   } else {
                //     this.$popError(res.data.message)
                //   }
                 })
              } else {
                done();
              }
            }
          }).then(() => {
          }).catch(() => {
          });
        },

       end(row) {
          this.$confirm('确定要禁用这条告警规则吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal:false,
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = '执行中...';
                // let req = {
                //   id: row.id,
                //   adminEmail: this.$store.state.user.userMail,
                //   userId:this.$store.state.user.userId,
                //   clusterJson:row.clusterJson
                // }
                let req = {
                  ids: row.id,
                  adminEmail: this.$store.state.user.userMail,
                 // userId:this.$store.state.user.userId,
                  names: row.alert
                }
                /this.$http.stopMonitor(req).then((res) => {
                //   done();
                //   instance.confirmButtonLoading = false;
                //   if (res && res.data.state=='success') {
                //     this.$popSuccess('禁用告警规则成功')
                //     this.search()
                //   } else {
                //     this.$popError(res.data.message)
                //   }
                 })
              } else {
                done();
              }
            }
          }).then(() => {
          }).catch(() => {
          });
        }

    alertHistory (item) {
          let path;
          if (this.$store.state.productType == 2){
            path= "/app/boc-logAlarmHistory"
          } else{
            path= "/app/boms/monitorHistory"
          }
          let obj = {
            path:path,
            query: {
              id: item.id,
                  //sysId: this.query.sysId,
                  //: this.query.userId,
                  pageNum: 1,
                  pageSize: 10,
                  alert: item.alert,
                  monitorType: item.monitorType
            }
        };
            this.$router.push(obj)
        },

  • 相关阅读:
    HTML3 / 4 / 4.1 / 5 版本升级过程中,变化是怎么样的
    HTML head内所有标签,及其作用
    HTML 和 XHTML和区别
    HTML DOCTYPE 都有哪些,它们之前的区别和用途分别是什么?
    eclipse中英文切换--四种方式
    Eclipse Class Decompiler---Java反编译插件
    jdk历史版本下载
    eclipse优化(部分)
    博客迁移到github
    JavaScript:同步、异步和事件循环
  • 原文地址:https://www.cnblogs.com/robot666/p/12080896.html
Copyright © 2020-2023  润新知