vue全（不）选的实现------批量操作和单个操作

vue全（不）选的实现------批量操作和单个操作

<template>
  <!-- 页面内容 -->
  <div class="severContent">
    <table class="table text-center">
      <thead>
        <tr>
          <th style="width:5%;">
              <input class="itemCheckboxInput" type="checkbox" id="all" v-model="isSelectAll" @change="selectAll">
          </th>
          <th style="width:25%;">盒子</th>
          <th style="width:30%;">IP</th>
          <th style="width:20%;">查看详情</th>
          <th style="width:20%;">操作</th>
        </tr>
      </thead>
      <tbody class="severTbody">
        <tr v-for="item in boxInfoList">
          <td>
              <input class="itemCheckboxInput" :value="item.id" v-model="checkList" :id="item.id" type="checkbox">
          </td>
          <td>{{item.id}}</td>
          <td>{{item.ip}}</td>
          <td>
            <div>
                <el-button @click="boxDetail" style="background:#fff;color:#0295e5;border: 1px solid #0295e5;border-radius:2rem;">查看详情</el-button>
            </div>
          </td>
          <td>
            <div>
                <el-button @click="setIp" :disabled="userName!=='admin'" style="background:#fff;color:#0295e5;border: 1px solid #0295e5;border-radius:2rem;">服务器配置</el-button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="allSetIp">
      <el-button type="primary" @click="setAllIp">批量配置</el-button>
      <!-- <el-button type="primary" @click="setAllIp" :disabled="userName!=='admin'">批量配置</el-button> -->
    </div>
     <!-- dialog====查看盒子详情 -->
    <el-dialog :title="'详情'" :visible.sync="showBoxDetail" top="10vh" width="60%">
      <el-table
        :data="robotList"
        height="45rem"
        style="width: 100%" class="dialogTable">
        <el-table-column
          prop="num"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="robotName"
          label="模块">
          <template slot-scope="scope">
            <div><span>{{scope.row.name}}</span><span :class="[scope.row.state==='off'?'redColor':'']" v-if="scope.row.state==='off'">（离线）</span></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="ip"
          label="IP">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- dialog====查看盒子详情 -->
    <el-dialog title="服务器配置" :visible.sync="showSeverSet"  top="10vh" width="25%">
      <el-form>
        <el-form-item label="项目名称:" label-width="100px">
          <el-input style="width:90%;" v-model="ip" maxlength="20" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSeverSet=false">取 消</el-button>
        <el-button type="primary" @click="sendSetIp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
 
</template>
<script>
export default {
  data () {
    return {
      ip: null,
      userName: localStorage.getItem('userName'),
      isSelectAll: false,
      checkList: [],
      showBoxDetail: false,
      showSeverSet: false,
      boxIds: null,
      boxInfoList: [
        {
          id: 0,
          ip: 123,
        },
        {
          id: 1,
          ip: 123,
        }
        ,
        {
          id: 2,
          ip: 123,
        }
      ],
      robotList: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init () {
       this.boxIpList()
    },
    // 获取盒子IP列表
    boxIpList () {
    
    },
    // 全(不)选操作
    selectAll () {
      console.log('isSelectAll:' + this.isSelectAll)
      if (this.isSelectAll) {
        this.checkList = []
        if (this.boxInfoList.length === 0) return
        this.boxInfoList.forEach(v => {
          this.checkList.push(v.id)
        })
      } else {
        this.checkList = []
      }
      console.log(this.checkList)
    },
    // 查看详情
    boxDetail () {
      console.log('查看详情')
      this.showBoxDetail = true
    },
    // 单个设置IP
    setIp () {
      console.log('设置IP')
      this.showSeverSet = true
      this.checkList = []
    },
    // 批量设置IP
    setAllIp () {
      console.log('批量设置IP')
      if (this.checkList.length > 0) {
        this.showSeverSet = true
        this.boxIds = this.checkList.join(',')
        console.log('boxIds: ' + this.boxIds)
      } else {
        this.$message({
          message: '请先选择盒子',
          type: 'warning',
          duration: 1000
        })
      }
    },
    // 发送IP设置请求
    sendSetIp () {
      console.log('ip:' + this.ip)
      console.log('ip judge:' + this.isValidIP(this.ip))
      if (!this.isValidIP(this.ip)) {
        return this.$message({
          message: 'IP设置不合法,请设置合法IP',
          type: 'warning',
          duration: 1000
        })
      }
      console.log('boxIds: ' + this.boxIds)
    },
    isValidIP(ip) {
      let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      return reg.test(ip);
    }
  }
}
</script>

<style lang="less">
  .el-dialog__footer {
    text-align: center;
  }
  .dialog-footer {
    .el-button {
      height: 2.2rem;
      width: 6rem;
      font-size: 1rem;
      line-height: 2.2rem;
      border: 1px solid #356AF6;
      text-align: center;
      border-radius: 1rem;
      background-color: #ffffff;
      color: #356AF6;
    }
    .el-button--default:hover {
      background: #ffffff;
      color: #356AF6;
    }
    .el-button--primary,.el-button--primary:hover {
      background-color: #2E65F6;
      color: #ffffff;
    }
  }
  .severContent::-webkit-scrollbar {
    display: none;
  }
  .severTbody::-webkit-scrollbar {
    display: none;
  }
  .severContent {
    width: 100%;
    height: 63.5rem;
    overflow-y: scroll;
    padding: 1rem;
    .allSetIp {
      padding-top: 1rem;
      width: 100%;
      text-align: center;
    }
    .severTbody {
      height: 58rem;
      overflow-y: auto;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        thead {
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
            td {
                padding: 16px 10px;
                background: #FAFAFA;
                font-weight: normal;
            }
            th {
                padding: 16px 10px;
                background: #FAFAFA;
                font-weight: normal;
            }
        }
        tbody {
        border: solid .01rem #EEEEEE;
        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
            width: 100%;
            td {
                padding: 15px 10px;
                font-size: 12px;
                border-bottom: solid .01rem #EEEEEE;
                text-align: center;
            }
        }
        }
    }
  }
</style>

效果：