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

2019-07-22  本文已影响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);
          })

        }
  },
上一篇下一篇

猜你喜欢

热点阅读