<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-10 15:28:07
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-03-14 14:48:46
|
* @FilePath: \forest-fire\src\views\fireWarning\components\box\tabsTable.vue
|
* @Description: 防火预警
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<script setup>
|
import { ref, onMounted, nextTick } from 'vue'
|
|
// 然后将element-ui中pagination选项改掉
|
// zhCn.el.pagination = {
|
// pagesize: '条/页'
|
// }
|
|
const curHeight = ref(0)
|
|
const currentPage = ref(1)
|
const pageSize = ref(15)
|
const small = ref(true)
|
const background = ref(true)
|
const disabled = ref(false)
|
|
const tableContent = ref(null)
|
|
const handleSizeChange = (val) => {
|
console.log(`${val} items per page`)
|
}
|
const handleCurrentChange = (val) => {
|
console.log(`current page: ${val}`)
|
}
|
|
const propsData = defineProps({
|
tableData: {
|
type: Array,
|
default: () => []
|
}
|
})
|
|
onMounted(() => {
|
nextTick(() => {
|
curHeight.value = tableContent.value.offsetHeight - 40
|
})
|
})
|
|
|
</script>
|
|
<template>
|
<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>
|
</template>
|
|
<style lang="scss" scoped>
|
.content {
|
height: 100%;
|
|
.page {
|
height: 40px;
|
line-height: 40px;
|
}
|
}
|
</style>
|
