VUE全选和反选案例

话不多说show my code

<el-dialog width="700px" title="导出数据" :visible.sync="dialog.export">
  <p style="margin-bottom: 25px">2、选择导出字段：</p>
  <el-checkbox-group v-model="checkedFields" @change="handleCheckedChange">
    <el-checkbox v-for="item in fields" :label="item.key" :key="item.key" :value="item.key" style="margin-bottom: 15px">{{item.value}}</el-checkbox>
  </el-checkbox-group>
  <div slot="footer">
    <el-row>
      <el-col :span="6">
        <el-checkbox v-model="unChecked" @change="handleCheckReverse">反选</el-checkbox>
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </el-col>
      <el-col :span="6" :push="12">
        <el-button @click="dialog.export=false">取消</el-button>
        <el-button type="primary" @click="handleExport">确定</el-button>
      </el-col>
    </el-row>
  </div>
</el-dialog>复制代码

data() {
  return {
    unChecked:false,checkAll: true,
checkedFields: [],
fieldsKeys:[],
fields:[
  {key: 'userid', value: "VV号"},
  {key: 'mcid', value: "推广小组"},
  {key: 'scid', value: "推广员"},
  {key: 'platformid', value: "平台"},
  {key: 'gamename', value: "游戏"},
  {key: 'zonename', value: "区服"},
  {key: 'roleid', value: "角色ID"},
  {key: 'rolename', value: "角色名"},
  {key: 'rolelevel', value: "角色等级"},
  {key: 'ip', value: "IP"},
  {key: 'deviceid', value: "设备号"},
  {key: 'rechargetotal', value: "累计充值"},
  {key: 'pronum', value: "封禁次数"},
  {key: 'lastlogouttime', value: "更新时间"}
    ]
 }
}复制代码

//导出弹窗全选
handleCheckAllChange(val) {
  this.checkedFields = val ? this.fieldsKeys : [];
  console.log(this.checkedFields,this.unChecked)
  if(this.checkedFields.length==14&&this.unChecked==true){
    this.unChecked=false
  }
},
//导出弹窗单个选中
handleCheckedChange(value) {
  let checkedCount = value.length;
  this.checkAll = checkedCount === this.fieldsKeys.length;
},
//导出弹窗反选
handleCheckReverse(){
  this.checkedFields = this.fieldsKeys.filter(item=>!this.checkedFields.includes(item))
  if(this.checkedFields.length==0){
    this.checkAll=false
  }
  if(this.checkedFields.length==this.fieldsKeys.length){
    this.checkAll=true
  }
},
//获取导出字段
 getExcelKeys(){
    this.fieldsKeys = this.fields.map(a => a.key);
    this.checkedFields = this.fieldsKeys
  },复制代码

最终效果图：

转载于:https://juejin.im/post/5c4fc7305188252b7d0ec38a