vue指定导出列表某些需要字段

Fhm123456_

已于 2022-12-16 14:55:22 修改

阅读量814

点赞数 1

于 2022-06-07 16:22:26 首次发布

本文链接：https://blog.csdn.net/Fhm123456_/article/details/125167649

版权

工作分享专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果如图。

直接复制粘贴，变量/样式/方法都已经贴上了。

<el-dialog
      v-if="exportDialogVisible"
      title="导出"
      :visible.sync="exportDialogVisible"
      :close-on-click-modal="false"
      width="580px"
      class="expert-dialog"
      @close="cancelExport"
    >
      <el-form ref="exportForm" label-position="top">
        <el-form-item label="请选择导出数据">
          <el-checkbox-group v-model="checkedProps">
            <el-checkbox v-for="item in exportPropsList" :key="item.code" 
       :label="item.name">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="tips-title">温馨提示：</div>
      <div class="tips-content">导出格式为.xlsx文件</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureExport">确 定</el-button>
      </span>
 </el-dialog>

代码中变量： 
exportPropsList: [
        { name: '病理号', code: 'pathologyNo' },
        { name: '蜡块', code: 'waxNo' },
        { name: '送检单位', code: 'sendHospitalName' },
        { name: '患者姓名', code: 'patientName' },
        { name: '检查项目', code: 'itemCheck' },
        { name: '切片名称', code: 'slideName' },
        { name: '切片人', code: 'cuttingDoctorName' },
        { name: '切片时间', code: 'cuttingTime' },
        { name: '加急标识', code: 'urgent' }
      ],
checkedProps: ['病理号', '蜡块', '患者姓名', '切片名称', '切片人', '切片时间'],

代码中方法：    
    cancelExport() {
      resetData(this, 'checkedProps')
      this.exportDialogVisible = false
    },
    async sureExport() {
      if (!this.checkedProps || this.checkedProps.length === 0) {
        this.$message.error('请至少选择一列数据')
        return
      }
    slicedListExport这个就是后端提供的接口，传了选中的列表id，以及指定导出的字段//
      const res = await slicedListExport({
        fields: this.checkedProps,
        ids: this.allCheckList
      })
      const href = window.URL.createObjectURL(res)
      const link = document.createElement('a')
      link.href = href
      link.download = '切片清单' + moment().format('YYYY-MM-DD HH:mm:ss') + '.xlsx'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(href)
      this.cancelExport()
    },
代码中css： 
  .el-dialog__wrapper.expert-dialog{
    ::v-deep .el-dialog{
      width: 580px!important;
    }
    ::v-deep .el-dialog__body{
      padding: 20px;
      .tips-title{
        font-size: 14px;
        color: #252A46;
        margin-bottom: 10px;
        line-height: 14px;
        height: 14px;
        opacity: .8;
      }
      .tips-content{
        font-size: 14px;
        color: #9899A7;
        line-height: 14px;
        height: 14px;
        margin-bottom: 14px;
      }
      .el-form-item{
        margin-bottom: 10px;
        .el-form-item__label{
          font-size: 16px;
          color: #252A46;
          font-weight: 500;
          margin-bottom: 30px;
          height: 16px;
          padding: 0;
          line-height: 16px;
        }
        .el-checkbox-group{
          display: flex;
          flex-wrap: wrap;
          .el-checkbox{
            width: 135px;
            height: 18px;
            margin-bottom: 30px;
            margin-right: 0;
            .checkbox__label{
              font-size: 14px;
              color: #676978;
              line-height: 18px;
              padding-left: 10px;
            }
            .el-checkbox__input{
              .el-checkbox__inner{
                width: 18px;
                height: 18px;
                &:after{
                  top: 3px;
                  left: 6px;
                }
              }
            }
          }
        }
      }
    }
  }

不清楚的可以留言，亲测可以的