ElementUi-Vue table跨页多选功能

一 . 修改el-table

在el-table处增加:row-key="getRowID"

<templement>
	<el-table id="table" 
	 ref="weighingDataTable" 
	 :data="weighingDataList" force-scroll highlight-current-row
	 style="width: 100%" 
	 force-scroll="horizontal" 
	 sortable stripe class="el-table__header"
	 @selection-change="getChangeData" 
	 //或:row-key=id 
	 :row-key="getRowID"> 
 </templement>

<script>
	getRowID(row) {
        return row.id
     },
</script>

二 . 修改el-table-column

    //<el-table-column type="selection"> </el-table-column>修改为
        <el-table-column type="selection" :reserve-selection='true'> </el-table-column>

三 . 全部前端代码

<template>
                <el-table id="table" ref="weighingDataTable" :data="weighingDataList" force-scroll highlight-current-row
                    style="width: 100%" force-scroll="horizontal" sortable stripe class="el-table__header"
                    @selection-change="getChangeData" :row-key="getRowID">
                    <el-table-column type="selection" width="55" :reserve-selection='true'> </el-table-column>
                    <el-table-column type="index" width="80" label="序号"> </el-table-column>
                </el-table>
</template>
<script>
    export default {
        data() {
            return {
          //多选缓存池
                tradeSelectedPool: [],
                rowSizeCache: 0,
                }, 

        methods: {
            getRowID(row) {
                return row.id
            },
            //获取选中的数据
            getChangeData(rows) {
                console.log("选择 rows.length" + rows.length);
                this.tradeSelectedPool = rows
                console.log("选择 tradeSelectedPool.length" + this.tradeSelectedPool.length);
            },
           //导出选中数据
            exportWeighingData() {
                var self = this
                axios({
                    method: 'post',
                    url: "/tvwpisds/exportWeighingData",
                    data: {
                        "grossWeightSum": this.grossWeightSum,
                        "tareWeightSum": this.tareWeightSum,
                        "netWeightSum": this.netWeightSum,
                        "exportData": this.exportData,
                        "timeCondition": this.timeCondition
                    },
                    responseType: 'arraybuffer', //注意这个参数必须加,不然会出现下载好的文件打开是乱码情况
                    //这个参数是为了告诉axios请求,咱们请求的是二进制数据流
                })
                    .then(res => {
                        // 假设 data 是返回来的二进制数据
                        const data = res.data
                        const url = window.URL.createObjectURL(new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }))
                        const link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', self.$route.query.type)
                        link.download = "称重数据查询导出报表";
                        //注意:上面的self.$route.query.type是你要下载的文件名加文件后缀,例如test.docx
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)
                    })
            },
        }
    }
</script>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值