<template>
|
<el-row ref="searchRef">
|
<FYSearchBar @search="onSearch">
|
<template #options v-if="$slots.options">
|
<slot name="options"></slot>
|
</template>
|
<template #buttons v-if="$slots.buttons">
|
<slot name="buttons"></slot>
|
</template>
|
</FYSearchBar>
|
</el-row>
|
<el-row ref="expandRef" justify="space-between">
|
<el-col span="22">
|
<slot name="options-expand"></slot>
|
</el-col>
|
<el-col span="2">
|
<el-space :wrap="false">
|
<el-text size="small">字体</el-text>
|
<el-radio-group v-model="fontSize" size="small">
|
<el-radio-button value="small">小</el-radio-button>
|
<el-radio-button value="default">中</el-radio-button>
|
<el-radio-button value="large">大</el-radio-button>
|
</el-radio-group>
|
</el-space>
|
</el-col>
|
</el-row>
|
<div ref="expand2Ref">
|
<slot name="options-expand2"></slot>
|
</div>
|
<el-table
|
v-bind="$attrs"
|
ref="tableRef"
|
:data="tableData"
|
v-loading="loading"
|
table-layout="fixed"
|
:row-class-name="tableRowClassName"
|
:height="tableHeight"
|
:size="fontSize"
|
@cell-click="cellClick"
|
:cell-class-name="cellClassName"
|
@paste="handlePaste"
|
@sort-change="handleSortChange"
|
:show-overflow-tooltip="true"
|
border
|
>
|
<slot name="table-column" :size="fontSize"></slot>
|
</el-table>
|
|
<el-pagination
|
v-if="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 {
|
inject: ['contentMaxHeight'],
|
props: {
|
rowClassName: undefined,
|
cellClassName: Function || String,
|
pagination: {
|
type: Boolean,
|
default: true
|
},
|
// '' | 'small' | 'default' | 'large'
|
size: {
|
type: String,
|
default: 'default'
|
},
|
data: {
|
type: Array,
|
default: () => []
|
},
|
totalCount: {
|
type: Number,
|
default: 0
|
},
|
// 额外的高度，用于计算表格高度
|
extraHeight: {
|
type: Number,
|
default: 0
|
}
|
},
|
data() {
|
return {
|
tableHeight: '500',
|
tableData: [],
|
total: 0,
|
currentPage: 1,
|
pageSize: 20,
|
loading: false,
|
fontSize: 'default'
|
};
|
},
|
emits: ['search', 'cellClick', 'tablePaste', 'sortChange'],
|
watch: {
|
currentPage(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onSearch();
|
}
|
},
|
pageSize(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onSearch();
|
}
|
},
|
size: {
|
handler(nValue, oValue) {
|
if (nValue != oValue) {
|
this.fontSize = nValue;
|
}
|
},
|
immediate: true
|
},
|
data(nValue, oValue) {
|
if (nValue != oValue) {
|
this.tableData = nValue;
|
}
|
},
|
totalCount(nValue, oValue) {
|
if (nValue != oValue) {
|
this.total = nValue;
|
}
|
},
|
extraHeight: {
|
handler(nValue, oValue) {
|
if (nValue != oValue) {
|
this.tableHeight = this.calcTableHeight();
|
}
|
},
|
}
|
},
|
computed: {},
|
methods: {
|
/**
|
* 表格数据查询，传递两组参数，分页信息和回调函数
|
* 分页信息包括当前页码currentPage和每页数据量pageSize
|
* 回调函数接收一个对象，包括表格数据数组data和数据总数total
|
*/
|
onSearch() {
|
this.loading = true;
|
this.$emit(
|
'search',
|
{
|
currentPage: this.currentPage,
|
pageSize: this.pageSize
|
},
|
(res) => {
|
if (res) {
|
if (res.data) {
|
this.tableData = res.data;
|
}
|
if (res.total) {
|
this.total = res.total;
|
}
|
}
|
this.loading = false;
|
this.doLayout();
|
}
|
);
|
},
|
calcTableHeight() {
|
const h1 = this.$refs.searchRef.$el.offsetHeight;
|
const h2 = this.$refs.paginationRef
|
? this.$refs.paginationRef.$el.offsetHeight
|
: 0;
|
const h3 = this.$refs.expandRef.$el.offsetHeight;
|
const h4 = this.$refs.expand2Ref.offsetHeight;
|
|
const h = h1 + h2 + h3 + h4 + this.extraHeight;
|
return this.contentMaxHeight.value - h + 'px';
|
// return `calc(100vh - ${h}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';
|
}
|
},
|
cellClick(row, column, cell, event) {
|
this.$emit('cellClick', row, column, cell, event);
|
},
|
handlePaste(event) {
|
this.$emit('tablePaste', event);
|
},
|
doLayout() {
|
this.$refs.tableRef.doLayout();
|
},
|
handleSortChange({ column, prop, order }) {
|
this.$emit('sortChange', { column, prop, order });
|
},
|
clearSort() {
|
this.$refs.tableRef.clearSort();
|
}
|
},
|
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>
|
