1、引入组件
import RemoteTable from "@/components/RemoteTable";
2、父组件
<RemoteTable
:columns="columns"
:pageInfo="pageInfo"
:pagination="pagination"
:showPageInfo="true"
:isFixedHeader="true"
:showCount="true"
:loading="loading"
@onchangePage="onchangePage"
@onChangeSize="onChangeSize"
@bandleTableCheck="onTableCheck"
@tableIndex="tableIndex"
@onSortChange="onSortChange"
>
</RemoteTable>
columns: [], // 头部
pageInfo: [], // 数据源
pagination: { // 分页信息
page_size: 10,
total: 0,
current_page: 1,
},
onchangePage、onChangeSize: 分页方法;
onTableCheck: 选中的方法;
onSortChange: 排序的方法;
3、 子组件
<template>
<div>
<Table
:maxHeight="isFixedHeader ? '500' : 'auto'"
:columns="columns"
:data="pageInfoList"
border
:loading="loading"
size="small"
@on-select="handleSelect"
@on-select-cancel="handleSelectCancel"
@on-select-all="handleSelectAll"
@on-select-all-cancel="handleSelectAllCancel"
@on-sort-change="handleSortChange"
ref="tables"
>
<template slot-scope="{ row, index }" slot="action">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(row, index)">详情</Button>
</template>
</Table>
<div :style="{textAlign: 'right'}" v-if="showPageInfo" style="margin-top: 20px">
<Page
:total="pagination.total"
:current="pagination.current_page"
:page-size="pagination.page_size"
show-total
:page-size-opts='[10, 20, 50, 100]'
show-elevator
show-sizer
placement="top"
@on-change="handlePageChange"
@on-page-size-change="handlePageSizeChange" />
</div>
</div>
</template>
<script>
import {Table, Page, Button } from 'view-design';
export default {
name: 'remoteTable',
components: {
Table,
Page,
Button
},
props: {
// 表头
columns: Array,
// list
pageInfo: Array,
pagination: Object,
/** 是否显示分页 */
showPageInfo: {
type: Boolean,
default: () => {
return true
}
},
/** 是否固定表头，如果固定表头，会默认给 600 的高度**/
isFixedHeader: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: () => true
}
},
data() {
return {
/** 当前tables中存在且选中的行 */
pageInfoList: this.pageInfo,
selectedRows: []
};
},
watch: {
'pageInfo' (newVal, oldVal) {
if (newVal) {
this.pageInfoList = newVal;
this.handleTableCheckd(newVal);
}
}
},
created () {
},
methods: {
show (row, index) {
this.$emit('tableIndex',row, index)
},
/**
* 切换分页,拿到勾选数据
*/
handleTableCheckd (list) {
this.selectedRows.forEach(el => {
list.forEach(e => {
if (el.id === e.id) {
e['_checked'] = true;
}
})
})
},
/**
* 单选
*/
handleSelect(selection, row) {
this.selectedRows.push(row);
// this.selectedRows.push(row.id);
this.pageInfoList.forEach(el => {
if (el.id === row.id) {
el['_checked'] = true;
}
});
this.$emit('bandleTableCheck', this.selectedRows);
},
/**
* 单选取消
*/
handleSelectCancel (selection, row) {
this.selectedRows.forEach((el, index) => {
if (row.id === el.id) {
this.selectedRows.splice(index, 1);
}
})
this.$emit('bandleTableCheck', this.selectedRows);
},
/**
* 全选
*/
handleSelectAll (selection) {
selection.forEach(el => {
this.selectedRows.push(el)
// this.selectedRows.push(el.id)
})
this.selectedRows = Array.from(new Set(this.selectedRows));
this.$emit('bandleTableCheck', this.selectedRows);
},
/**
* 取消全选
*/
handleSelectAllCancel (selection) {
this.pageInfoList.forEach(el => {
this.selectedRows.forEach((e, index) => {
if (el.id === e.id) {
this.selectedRows.splice(index, 1);
}
})
})
this.$emit('bandleTableCheck', this.selectedRows);
},
handleSortChange(sort) {
this.$emit("onSortChange", sort);
},
/**
* 切换每页的回调
*/
handlePageChange(currentPage) {
this.$emit('onchangePage', currentPage)
},
/**
* 切换每页条数的回调
**/
handlePageSizeChange(size){
this.$emit('onChangeSize', size)
}
}
};
</script>
<style scoped lang="less">
.ivu-table .demo-table-info-row td{
background-color: #fff;
color: red;
}
.show_count {
text-align: right;
}
</style>
