Vue excel导出，多选一级父级选中，勾选，全选，取消（根据列名导出）

1，首先设置按钮，弹出弹框

<el-button type="primary" @click="memberExcelExportHandle()" :disabled="exportLoading">勾选导出</el-button>

默认状态false

 data () {return {dataForm: {key: ''},memberExcelExportVisible: false}},

点击状态变true

     //勾选导出弹窗memberExcelExportHandle() {this.memberExcelExportVisible = truethis.$nextTick(() => {this.$refs.showExcelExport.init()})},

2，新建一个页面，引入组件

设置组件，定义ref名

    <!-- 弹窗, 勾选 --><show-excel-export v-if="memberExcelExportVisible" ref="showExcelExport" @refreshDataList="getDataList"></show-excel-export>

引入新页面

import ShowExcelExport from './member-excel-export.vue'

写入组件中

components: {ShowExcelExport},

3，数据展示，新页面布局

<template><el-dialog:title="name":close-on-click-modal="false":visible.sync="visible"><el-form :model="dataForm" ref="dataForm" @keyup.enter.native="checkExcelExport()" label-width="80px"> <el-checkbox v-model="checkAll" @change="handleCheckAllChange()">全选</el-checkbox><!-- <el-button @click="resetChecked">清空</el-button> --><el-form-item size="mini" label="勾选"><el-treeclass="filter-tree":data="data"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps"check-on-click-node></el-tree><!-- <p><b>当前选中</b> <span>{{ select_box }}</span></p> --></el-form-item></el-form> <span slot="footer" class="dialog-footer"><el-button @click="visible = false">取消</el-button><!-- <el-button  @click="handleCheckChange">通过 key 设置</el-button> --><el-button type="primary"  @click="checkExcelExport()">确定</el-button></span></el-dialog>
</template><script>export default {data() {return {name:'勾选导出',checkAll: false, visible: false,select_box: [],dataForm: {key: ''},defaultProps: {children: 'children',label: 'label'},//要导出的数据，可接口获取数据，我这写死测试的data: [{id: 'memberId',label: '用户ID'}, {id: 'inviteCode',label: '用户编号'}, {id: 'phone',label: '手机号'},{id: 'nickName',label: '昵称'}]};},methods: {//进入显示init() {  // 显示数据this.data.data;// 展示弹窗this.visible = true;//全选状态this.checkAll= true;// 默认全选this.$nextTick(function () {this.$refs.tree.setCheckedNodes(this.data); });},// //多选,单独调用时// handleCheckChange(){//     //获取id//     this.$nextTick(function () {//         let select_box = [];//         this.$refs.tree.getCheckedNodes().forEach((item) => {//             select_box.push(item.id);//         });//         this.select_box = select_box;//         console.log(this.select_box);//     });// },//设置全选handleCheckAllChange() {if (this.checkAll) {this.$nextTick(function () {this.$refs.tree.setCheckedNodes(this.data); // 全选});} else {this.$nextTick(function () {this.$refs.tree.setCheckedKeys([]);//取消全选});}},// 勾选导出checkExcelExport () {//获取ids      (此处不能用his.$nextTick(function () 函数异步处理，这个地方是同步处理)let select_box = [];this.$refs.tree.getCheckedNodes().forEach((item) => {select_box.push(item.id);});//同步赋值this.select_box = select_box;// console.log(this.select_box);this.visible = true//赋值转换this.key = this.select_box;// console.log(this.select_box);// console.log(this.key);var key = this.key.map(item => {return item})//向后台发起请求this.$export({url: this.$http.adornUrl('/XXX/XXX/check/export'),method: 'get',params: this.$http.adornParams({'key':  key.toString()})}).then((res) => {console.log('导出',res)this.visible = falseif (res) {this.$message.success('勾选导出成功')}})}}};
</script>

最后效果：

Vue excel导出，多选一级父级选中，勾选，全选，取消（根据列名导出）相关推荐

微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选微信小程序checkbox的全选以及所有checkbox选中之后的全选第一次写,软件都不懂,直接把代码拷过来了模板 WXML ...
element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)
在做菜单和菜单按钮权限配置这块,用element-UI中的tree组件来做.想选中单个页面,或者单个页面的某个具体按钮,就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选. ...
layui checkbox 反选/全选/取消单个取消全选/全部选中勾上全选
更: 下面连接文章就是解决checkbox只能取到最后一个值的解决办法 https://blog.csdn.net/qq_16513911/article/details/81981733 <d ...
antd树型选择控件选择父级_element的tree树形菜单回显、父级半勾选
解决的问题: 1. 当拿到了后台的数据,使用id去渲染选中的节点时,如果父级id包含在id数组里,而此id下面的子节点只有部分选中的情况下,此父级id下面得所有子节点全部被选中了. 2. 当需要保存当 ...
vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
EXCEL或者WPS excel 某列从某行开始以上或以下全选的操作，某行从某列开始的以后全选
EXCEL或者WPS excel 某列从某行开始以上或以下全选的操作 ,某行从某列开始的以后全选列的选择有两种方式一是 ctrl+shift + 方向键二是 shift+ pageup 或者 p ...
ElementUI tree控件如何取得被选中的节点,以及父节点(即使没被全选)
ElementUI tree控件如何取得被选中的节点,以及父节点(即使没被全选) <el-tree:data="roleMenuData"node-key="id& ...
vant weapp 多选上传图片_小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选...
我是结合的vant weapp的checkbox实现的,less代码我就不给了 index.wpy {{list.materail_name}} {{list.materail_brand}} {{l ...
小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选
我是结合的vant weapp的checkbox实现的,less代码我就不给了 index.wpy <view class="item"><van-checkbo ...

Vue excel导出，多选一级父级选中，勾选，全选，取消（根据列名导出）

Vue excel导出，多选一级父级选中，勾选，全选，取消（根据列名导出）相关推荐

最新文章

热门文章