| | |
| | | </template> |
| | | </FYSearchBar> |
| | | </el-row> |
| | | |
| | | <el-row ref="expandRef"> |
| | | <slot name="options-expand"></slot> |
| | | </el-row> |
| | | <el-table |
| | | :data="tableData" |
| | | v-loading="loading" |
| | |
| | | </el-table> |
| | | |
| | | <el-pagination |
| | | v-if="pagination" |
| | | ref="paginationRef" |
| | | class="el-pagination" |
| | | v-model:current-page="currentPage" |
| | |
| | | export default { |
| | | props: { |
| | | rowClassName: undefined, |
| | | pagination: { |
| | | type: Boolean, |
| | | default: true |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | total: 0, |
| | | currentPage: 1, |
| | | pageSize: 20, |
| | | loading: false, |
| | | }; |
| | | loading: false |
| | | } |
| | | }, |
| | | emits: ['search'], |
| | | watch: { |
| | | currentPage(nValue, oValue) { |
| | | if (nValue != oValue) { |
| | | this.onSearch(); |
| | | this.onSearch() |
| | | } |
| | | }, |
| | | pageSize(nValue, oValue) { |
| | | if (nValue != oValue) { |
| | | this.onSearch(); |
| | | this.onSearch() |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | methods: { |
| | | /** |
| | |
| | | * 回调函数接收一个对象,包括表格数据数组data和数据总数total |
| | | */ |
| | | onSearch() { |
| | | this.loading = true; |
| | | this.loading = true |
| | | this.$emit( |
| | | 'search', |
| | | { |
| | | currentPage: this.currentPage, |
| | | pageSize: this.pageSize, |
| | | pageSize: this.pageSize |
| | | }, |
| | | (res) => { |
| | | this.tableData = res.data; |
| | | this.total = res.total; |
| | | this.loading = false; |
| | | this.tableData = res.data |
| | | this.total = res.total ? res.total : 0 |
| | | this.loading = false |
| | | } |
| | | ); |
| | | ) |
| | | }, |
| | | calcTableHeight() { |
| | | const h1 = this.$refs.searchRef.$el.offsetHeight; |
| | | const h2 = this.$refs.paginationRef.$el.offsetHeight; |
| | | 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 h = h1 + h2 + h3 |
| | | // 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)`; |
| | | return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)` |
| | | }, |
| | | tableRowClassName({ row }) { |
| | | if (this.rowClassName) { |
| | | if (typeof this.rowClassName == 'string') { |
| | | return this.rowClassName; |
| | | return this.rowClassName |
| | | } else if (typeof this.rowClassName == 'function') { |
| | | return this.rowClassName({ row }); |
| | | return this.rowClassName({ row }) |
| | | } |
| | | } else { |
| | | return row.extension1 != '0' ? 'online-row' : 'offline-row'; |
| | | return row.extension1 != '0' ? 'online-row' : 'offline-row' |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.tableHeight = this.calcTableHeight(); |
| | | this.onSearch(); |
| | | }, |
| | | }; |
| | | this.tableHeight = this.calcTableHeight() |
| | | this.onSearch() |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |