vue 翻页选择导出

框架Vue2.15.14,后台是Aps.net core Api


            
            
        

重点是el-table:@selection-change="handleSelectionChange"

:row-key="getRowKey"

首列selection 的 :reserve-selection="true" 能够实现界面翻页显示选中

Vue.js

export default {
name: 'DlgGarbageBox',
data() {
        return {
            HandleState: [],
            dataPageIsLoading: false, // 数据分页列表是否加载中
            searchParam: {
                status: "",
                key: "",
                pageIndex: 1,
                pageSize: 10,
                orderColumn: null,
                orderBy: null,
                admin_lettr_ids:""
            },
            dataTotal: 0,
            tableData: [],
            currentrow: "",
            multipleSelection: "",
            selectArr:[],
        }
    },
methods: {
getRowKey(row) {
            return row.id;
        },
/**
         * 获取分页列表 查询
         */
        getPage() {
            this.dataPageIsLoading = true;
            this.$store.dispatch('getAdminLetterPage', this.searchParam).then((res) => {
                this.tableData = res.list;
                this.dataTotal = res.total;

                this.dataPageIsLoading = false;
            });
        },
handleSelectionChange(rows) {
            this.multipleSelection = rows;//每次选择的数据
            if (rows.length == 0) this.selectArr = [];
            else {
                //每次选择的数据存起来
                rows.forEach(row => {
                    if (row) {
                        if (this.selectArr.indexOf(row.id) == -1)
                            this.selectArr.push(row.id);
                    }
                });
            }
            console.log(this.selectArr);
        },
//导出
        exportAdminLetter(){
            console.log(this.selectArr);
            this.searchParam.admin_lettr_ids=this.selectArr.join(',');
            let request = {
                ...this.searchParam
            }

            this.isRequesting = true;

            this.$store.dispatch('exportAdminLetter', request).then(
                res => {
                    this.isRequesting = false;
                    this.searchParam.admin_lettr_ids="";
                    this.selectArr=[];
                    this.$refs.multipleTable.clearSelection();
                },
                err => {
                    this.isRequesting = false;
                }
            );
        },
    }
}

效果图:

vue 翻页选择导出_第1张图片

vue 翻页选择导出_第2张图片不管怎么翻选择的依然都选中,点击导出 参数是选中的三条数据:

vue 翻页选择导出_第3张图片

这样就实现了翻页选中导出

你可能感兴趣的:(vue.js,javascript,前端)