| | |
| | | </div> |
| | | <div class="table-container flex-1"> |
| | | <div class="table-content"> |
| | | <el-table class="data-table" :data="tableData" :highlight-current-row="false" :stripe="true" |
| | | <el-table class="data-table" ref="dataTable" :data="tableData" :highlight-current-row="false" :stripe="true" |
| | | :header-cell-style="{ backgroundColor: 'transparent', color: '#79A5E9', borderColor: '#29466A' }" |
| | | :cell-style="{ color: '#79A5E9', borderColor: '#29466A', paddingTop: '10px', paddingBottom: '10px' }" |
| | | :row-style="{ backgroundColor: 'transparent' }"> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref } from 'vue'; |
| | | import { ref, onMounted, onUnmounted, nextTick, inject, watch } from 'vue'; |
| | | |
| | | const tableState = inject('tableState'); |
| | | |
| | | const tableType = ref([ |
| | | { id: 1, type: '本月', isActive: true }, |
| | |
| | | ]); |
| | | |
| | | const tableData = [ |
| | | { |
| | | street: '奎光塔街道', |
| | | num1: 12, |
| | | num2: 5, |
| | | num3: 2 |
| | | }, |
| | | { |
| | | street: '奎光塔街道', |
| | | num1: 12, |
| | | num2: 5, |
| | | num3: 2 |
| | | }, |
| | | { |
| | | street: '奎光塔街道', |
| | | num1: 12, |
| | | num2: 5, |
| | | num3: 2 |
| | | }, |
| | | { |
| | | street: '奎光塔街道', |
| | | num1: 12, |
| | | num2: 5, |
| | | num3: 2 |
| | | }, |
| | | { |
| | | street: '奎光塔街道', |
| | | num1: 12, |
| | | num2: 5, |
| | | num3: 2 |
| | | }, |
| | | { |
| | | street: '奎光塔街道', |
| | | num1: 12, |
| | |
| | | }); |
| | | selectItem.isActive = true; |
| | | } |
| | | |
| | | |
| | | // 处理表格滚动 |
| | | let timer = null; |
| | | const dataTable = ref(null); |
| | | |
| | | // const clearScroll = () => { |
| | | // clearInterval(timer); |
| | | // timer = null; |
| | | // } |
| | | |
| | | // const createScroll = () => { |
| | | // clearScroll(); |
| | | // const table = dataTable.value.layout.table.refs; |
| | | |
| | | // const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild; |
| | | // console.log(tableWrapper); |
| | | // timer = setInterval(() => { |
| | | // tableWrapper.scrollTop += 1; |
| | | // if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) { |
| | | // tableWrapper.scrollTop = 0; |
| | | // } |
| | | // }, 100); |
| | | // } |
| | | // watch(tableState, (newValue) => { |
| | | // console.log(newValue); |
| | | // if (newValue) { |
| | | // nextTick(() => { |
| | | // setTimeout(() => { |
| | | // createScroll(); |
| | | // }, 2000); |
| | | // }) |
| | | // } else { |
| | | // clearScroll(); |
| | | // } |
| | | // }) |
| | | |
| | | // onUnmounted(() => { |
| | | // clearScroll(); |
| | | // }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | |
| | | .el-table__fixed-right { |
| | | height: 100% !important; |
| | | }</style> |
| | | } |
| | | </style> |