vue+element 分页选择并且导出

最新推荐文章于 2022-09-12 17:35:15 发布

请叫我大哥大

最新推荐文章于 2022-09-12 17:35:15 发布

阅读量555

点赞数

分类专栏： vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/m0_37931969/article/details/115122532

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

vue+element 分页选择并且导出

表格结构
a). 给type="selection"的列加上 reserve-selection=“true”
reserve-selection仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
b) Table Attributes属性加上row-key属性

<el-table
        :data="tableData"
        :row-key="getRowKey"
        :header-cell-style="{background:'#F9FAFC',color:'#000'}"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column :reserve-selection="true" type="selection" width="55"/>
</el-table>
<el-button size="small" @click="exportExcelFile">导出选中</el-button>

逻辑代码

data() {
	return {
		multipleSelection: []
	}
}
methods: {
	getRowKey(row) {
	  // 返回一个唯一标识
      return row.spuid
    },
    // 将选择的数据进行存储
    handleSelectionChange() {
		this.multipleSelection = val
	},
	// 导出组件
	exportExcelFile() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          message: '请先选择需要导出的数据',
          type: 'warning'
        })
        return false
      }
      this.$confirm(`确定要导出${this.multipleSelection.length}数据`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const tHeader = ['商品编号', '商品图片', '商品名称', '商品类目', 'SKU数量', '商品品牌', '供应商', '创建时间']
        const filterVal = ['spusn', 'pic', 'title', 'cateTitle', 'skuNum', 'brandName', 'supplierName', 'createtime']
        exportExcel(tHeader, filterVal, this.multipleSelection, this.formatJson, '采购商品列表').then(() => {})
      }).catch(() => {
        console.log('取消')
      })
    },
}