智慧园区前端大屏
src/views/armyLocal/components/box/tabsTable.vue
@@ -27,56 +27,53 @@
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>