<template>
|
<el-row ref="searchRef">
|
<FYSearchBar @search="onSearch">
|
<template #options>
|
<slot name="options"></slot>
|
</template>
|
</FYSearchBar>
|
</el-row>
|
|
<el-table
|
:data="tableData"
|
v-loading="loading"
|
table-layout="fixed"
|
:row-class-name="tableRowClassName"
|
:height="tableHeight"
|
>
|
<slot name="table-column"></slot>
|
</el-table>
|
|
<el-pagination
|
ref="paginationRef"
|
class="el-pagination"
|
v-model:current-page="currentPage"
|
v-model:page-size="pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
:background="true"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
/>
|
</template>
|
|
<script>
|
/**
|
* 数据表格组件
|
* 布局从上往下包括了三个部分
|
* 1. 查询条件FYSearchBar
|
* 2. 数据表格el-table
|
* 3. 分页组件el-pagination
|
* 使用时需要在<slot #options>中添加自定义查询选项，在<slot #table-column>中添加自定义表格列，同时实现触发函数search
|
*/
|
export default {
|
props: {
|
rowClassName: undefined,
|
},
|
data() {
|
return {
|
tableHeight: '500',
|
tableData: [],
|
total: 0,
|
currentPage: 1,
|
pageSize: 20,
|
loading: false,
|
};
|
},
|
emits: ['search'],
|
watch: {
|
currentPage(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onSearch();
|
}
|
},
|
pageSize(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onSearch();
|
}
|
},
|
},
|
methods: {
|
/**
|
* 表格数据查询，传递两组参数，分页信息和回调函数
|
* 分页信息包括当前页码currentPage和每页数据量pageSize
|
* 回调函数接收一个对象，包括表格数据数组data和数据总数total
|
*/
|
onSearch() {
|
this.loading = true;
|
this.$emit(
|
'search',
|
{
|
currentPage: this.currentPage,
|
pageSize: this.pageSize,
|
},
|
(res) => {
|
this.tableData = res.data;
|
this.total = res.total;
|
this.loading = false;
|
}
|
);
|
},
|
calcTableHeight() {
|
const h1 = this.$refs.searchRef.$el.offsetHeight;
|
const h2 = this.$refs.paginationRef.$el.offsetHeight;
|
// return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
|
return `calc(100vh - ${h1}px - ${h2}px - 60px - var(--el-main-padding) * 2)`;
|
},
|
tableRowClassName({ row }) {
|
if (this.rowClassName) {
|
if (typeof this.rowClassName == 'string') {
|
return this.rowClassName;
|
} else if (typeof this.rowClassName == 'function') {
|
return this.rowClassName({ row });
|
}
|
} else {
|
return row.extension1 != '0' ? 'online-row' : 'offline-row';
|
}
|
},
|
},
|
mounted() {
|
this.tableHeight = this.calcTableHeight();
|
this.onSearch();
|
},
|
};
|
</script>
|
|
<style>
|
.el-table .online-row {
|
/* background-color: rgb(4, 202, 21); */
|
}
|
|
.el-table .offline-row {
|
background-color: var(--el-disabled-bg-color);
|
color: var(--el-disabled-text-color);
|
}
|
|
.el-table .cell {
|
white-space: nowrap;
|
}
|
|
.el-pagination {
|
background-color: var(--el-color-white);
|
padding-top: 20px;
|
border-top: 1px solid rgba(0, 0, 0, 0.096);
|
/* margin-top: 2px; */
|
}
|
</style>
|
