checkbox全选_vue+element 全选方法

批量操作功能

html

 <table class="table-strip-ls">
          <thead>
            <tr>
              <td class="w40">
                <el-checkbox :indeterminate="isIndeterminate" v-model="multiOperationAll" @change="selectAll">
                </el-checkbox>
              </td>
              <td class="w120" v-if="navstate==-1">商品缩略图</td>
              <td class="w120" v-if="navstate==-1">商品ID</td>
              <td class="w120" v-if="navstate==-1">商品名称</td>
              <td class="w120" v-if="navstate==-1">品牌</td>
              <td class="w120" v-if="navstate==-1">所属类目</td>
              <td class="w120" v-if="navstate==-1">所属店铺</td>
              <td class="w120" v-if="navstate==-1">上架状态</td>
              <td class="w120" v-if="navstate==-1">活动状态</td>
              <td class="w120" v-if="navstate==-1">活动名称</td>
              <td class="w120" v-if="navstate==1">店铺名称</td>
              <td class="w120" v-if="navstate==1">企业名称</td>
              <td class="w120">预警值</td>
              <td class="w120">操作</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(val,index) in dataList" :key="val.id" style="height:65px;">
              <td>
                <el-checkbox v-model="multiGoodsStatus[index]">
                </el-checkbox>
              </td>
              <td v-if="navstate==-1">
                <p class="orderImg">
                  <img :src="val.productImg" alt="" />
                </p>
                
              </td>
              <td v-if="navstate==-1">{{val.productId}}</td>
              <td v-if="navstate==-1">
                <p class="ellipsis2 w120" :title="val.productName">
                  {{val.productName}}
                </p>
              </td>
              <td v-if="navstate==-1"> {{val.brandName}}</td>
              <td v-if="navstate==-1"> {{val.categoryName}} </td>
              <td v-if="navstate==-1"> {{val.storeName}}</td>
              <td v-if="navstate==-1">{{val.productUpStatus==0?'未上架':'已上架'}}</td>
              <td v-if="navstate==-1">
                 <span v-if="val.activityStatus==1">活动报名中</span>
                 <span v-if="val.activityStatus==2">活动中</span>
              </td>
              <td v-if="navstate==-1">{{val.activityName}}</td>
              <td v-if="navstate==1">{{val.storeName}}</td>
              <td v-if="navstate==1">{{val.entName}}</td>
              <td>
                {{val.secondEarlyWarning}} <br>
                {{val.minuteEarlyWarning}} <br>
                {{val.hourEarlyWarning}}
              </td>
              <td v-if="navstate==-1">
                 <el-button type="text" class="btn-handle" @click="earlySetting(val.productId,val)" style="color:#4DA9E4;width:auto;">预警设置</el-button>
              </td>
              <td v-if="navstate==1">
                 <el-button type="text" class="btn-handle" @click="earlySetting(val.storeId,val)" style="color:#4DA9E4;width:auto;">预警设置</el-button>
              </td>
            </tr>
            <tr v-if="dataList.length===0 && navstate==-1">
              <td colspan="12" class="com-nodata">暂无数据</td>
            </tr>
            <tr v-if="dataList.length===0 && navstate==1">
              <td colspan="5" class="com-nodata">暂无数据</td>
            </tr>
          </tbody>
        </table>
        <div class="pagination" v-if="dataList.length!==0">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
            :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="totalRecord">
          </el-pagination>
        </div>

js

data(){
   return{
        dataList: [],
        currentPage: 1,
        pageSize: 10,
        totalRecord: 0,
        //全选
        multiOperationAll: false,
        isIndeterminate: false,
        multiGoodsStatus: getMultiStatus(10),
  }
},
watch: {
      multiGoodsStatus: function (val) {
        if (val.every(x => x === true)) {
          this.multiOperationAll = true;
          this.isIndeterminate = false;
        } else if (val.every(x => x === false)) {
          this.multiOperationAll = false;
          this.isIndeterminate = false;
        } else {
          this.isIndeterminate = true;
          this.multiOperationAll = false;
        }
      }
  },
methods: {
  //全选
  selectAll(val) {
     this.multiGoodsStatus = getMultiStatus(this.dataList.length, val);
  },
   
  handleSizeChange(val) {
        this.multiGoodsStatus = getMultiStatus(this.dataList.length, false);
        this.isIndeterminate = false;
        this.currentPage = 1;
        this.pageSize = val;
        this.getList();
      },
  handleCurrentChange(val) {
        this.multiGoodsStatus = getMultiStatus(this.dataList.length, false);
        this.isIndeterminate = false;
        this.currentPage = val;
        this.getList();
  },
  earlySetting(id,item){
          //获取选中的当前ID
          let selectedItems = []
          this.multiGoodsStatus.forEach((x, index) => {
            if (x) {
              selectedItems.push(this.dataList[index].productId);
            }
          });
          let ids = selectedItems.join(',');
           if (selectedItems.length === 0 ) {
            this.$message('请选择商品');
            return !1;
          }
          this.warningSettings = true
          this.ids = ids
  },
},