话不多说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},复制代码

最终效果图：