ElementUi-Vue table跨页多选功能

心海虚言

已于 2022-07-13 10:09:20 修改

阅读量636

点赞数

分类专栏：前端文章标签： vue.js elementui

于 2022-07-13 10:08:19 首次发布

本文链接：https://blog.csdn.net/weixin_49002978/article/details/125757830

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一 . 修改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>