element table多选表格_element表格分页多选、全选

element-loading-text="数据正在加载中" ref="multipleTable"

@select="onTableSelect" @select-all="onTableSelectAll">

:current-page="currentPage" :page-sizes="pagesizeList" :page-size="pagesize"

:layout="pageLayout" :total="total" :background='pageBackground'>

引入下面封装的分页控件

import { pagingSearchCom } from '@/components/mixins/pagingSearch';

// import { pagingSearchCom } from '@/components/mixins/pagingSearch'

// mixins: [pagingSearchCom],

// 分页、查询 -- 封装在mixins里

import { mapState } from 'vuex'

export const pagingSearchCom = {

data(){

return {

loading: false,

list: [], //列表数据

currentPage: 1, //当前页数

pagesize: 10, //每页显示多少条

pagesizeList: [10, 20, 30, 40, 50],

pageLayout: "total, sizes, prev, pager, next, jumper",

pageBackground: true,

total: 0, //默认数据总数

isCreated: false

}

},

methods: {

// 页码

_getMixinsList(currentPage = this.currentPage, pagesize = this.pagesize) {

this.currentPage = currentPage;

this.pagesize = pagesize;

this._requestPageList({

pageNo: currentPage,

pageSize: pagesize,

})

},

// 列表接口

_requestPageList(pageData) {},

// 分页

handleSizeChange(size) {

this.pagesize = size;

this._getMixinsList(1, size)

//console.log(`每页 ${val} 条`);

},

handleCurrentChange(currentPage) {

this._getMixinsList(currentPage)

//console.log(`当前页: ${val}`);

},

//查询数据

searchDataMixin() {

// console.log('查询成功')

this._getMixinsList(1)

},

},

created() {

if(this.isCreated){

return

}

this._getMixinsList();

},

computed: {

// 通过VUEX动态计算表格的高度

...mapState({

tableHeight: state => state.searchCriteria.contentBoxHeight - 180

})

}

}

引入下面封装的分页多选、全选控件