美文网首页
element-ui表格全选所有导出数据

element-ui表格全选所有导出数据

作者: 嫑着急 | 来源:发表于2019-07-22 09:49 被阅读0次

    一种是点击全选,导出所有数据,一种是选择当前页选中的数据

    <el-button @click='dc' type="primary" icon='el-icon-document' style='padding: 7px;margin-top: 0px;margin-left: 10px;'>导出会员</el-button>
    
    <el-checkbox v-model="allCheck" style='width: 120px;line-height: 35px;text-indent: 1px;color: #77778d;' @change="allCheckEvent">全选所有</el-checkbox>
    
     <el-table :data="list" tooltip-effect="dark" ref="recordTable" highlight-current-row :row-key="getRowKeys" border stripe  @selection-change="handleSelectionChange"></el-table>
    
    //全选所有
       allCheckEvent() {
            // console.log(this.allCheck)   allCheck=true,就让表格全部选中,否则清除选中
            if (this.allCheck) {
              this.tableData2.forEach(row => {
                this.$refs.recordTable.toggleRowSelection(row, true)
              })
            } else {
              this.$refs.recordTable.clearSelection()
            }
        },
    
    //选择表格的ID push到 this.xz_id
    handleSelectionChange(val) {
            // console.log(val)
            this.xz_id.length = 0
            val.forEach((res) => {
              // console.log(res.id)
              this.xz_id.push(res.id)
            })
    },
    //全选导出
    getRowKeys(row) {
       // console.log(row)
      return row.id
    },
    
    dc() {
            // console.log(this.xz_id)
            if (this.xz_id.length <= 0) {
              this.$message.error('请选择你要导出的内容');
            } else {
              this.$axios({ // 用axios发送post请求
                method: 'post',
                url: this.$url + '/shop/master/user/export', // 请求地址
                data: JSON.stringify(this.xz_id), // 参数
                responseType: 'blob', // 表明返回服务器返回的数据类型
                headers: {
                  'Content-Type': 'application/json'
                }
              }).then(res => { // 处理返回的文件流
                const blob = new Blob([res.data]); //new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层)
                const fileName = '会员.xlsx'; //下载文件名称
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
              })
    
            }
      },
    

    相关文章

      网友评论

          本文标题:element-ui表格全选所有导出数据

          本文链接:https://www.haomeiwen.com/subject/mkpslctx.html