| | |
| | | currentPage: 1, |
| | | pageSize: 20, |
| | | 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(); |
| | | } |
| | | } |
| | | }, |
| | |
| | | * 回调函数接收一个对象,包括表格数据数组data和数据总数total |
| | | */ |
| | | onSearch() { |
| | | this.loading = true |
| | | this.loading = true; |
| | | this.$emit( |
| | | 'search', |
| | | { |
| | |
| | | pageSize: this.pageSize |
| | | }, |
| | | (res) => { |
| | | this.tableData = res.data |
| | | this.total = res.total ? res.total : 0 |
| | | 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 ? this.$refs.paginationRef.$el.offsetHeight : 0 |
| | | const h3 = this.$refs.expandRef.$el.offsetHeight |
| | | const h = h1 + h2 + h3 |
| | | 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 - ${h}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> |