| | |
| | | const tableContent = ref(null) |
| | | |
| | | const handleSizeChange = (val) => { |
| | | console.log(`${val} items per page`) |
| | | console.log(`${val} items per page`) |
| | | } |
| | | const handleCurrentChange = (val) => { |
| | | console.log(`current page: ${val}`) |
| | | console.log(`current page: ${val}`) |
| | | } |
| | | |
| | | const propsData = defineProps({ |
| | | tableData: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | tableData: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | }) |
| | | |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | curHeight.value = tableContent.value.offsetHeight - 40 |
| | | |
| | | console.log(tableContent.value.offsetHeight, `current page: ${curHeight.value}`) |
| | | |
| | | }) |
| | | nextTick(() => { |
| | | curHeight.value = tableContent.value.offsetHeight - 40 |
| | | }) |
| | | }) |
| | | |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | | <div ref="tableContent" class="content"> |
| | | <el-table :data="tableData" stripe style="width: 100%" :height="curHeight"> |
| | | <el-table-column prop="ind" label="序号" width="60" /> |
| | | <el-table-column prop="address" label="位置" /> |
| | | <el-table-column prop="fireGrade" label="火灾等级" /> |
| | | <el-table-column prop="fireAddress" label="燃烧位置" /> |
| | | </el-table> |
| | | <div ref="tableContent" class="content"> |
| | | <el-table empty-text="暂无数据" :data="tableData" stripe style="width: 100%" :height="curHeight"> |
| | | <el-table-column prop="ind" label="序号" width="60" /> |
| | | <el-table-column prop="address" label="位置" /> |
| | | <el-table-column prop="fireGrade" label="火灾等级" /> |
| | | <el-table-column prop="fireAddress" label="燃烧位置" /> |
| | | </el-table> |
| | | |
| | | <div class="page"> |
| | | <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :pager-count="5" |
| | | :page-sizes="[10, 20, 30, 50]" :small="small" :disabled="disabled" :background="background" |
| | | layout="sizes, prev, pager, next" :total="400" @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" /> |
| | | </div> |
| | | <div class="page"> |
| | | <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :pager-count="5" |
| | | :page-sizes="[10, 20, 30, 50]" :small="small" :disabled="disabled" :background="background" |
| | | layout="sizes, prev, pager, next" :total="400" @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .content { |
| | | height: 100%; |
| | | height: 100%; |
| | | |
| | | .page { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | } |
| | | .page { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | } |
| | | } |
| | | </style> |