解决表格闪烁的问题

shuishen

2023-01-09 7125214f47e3af0c4bc42ce9ba22a2e9ff27a6e6

解决表格闪烁的问题

 src/views/home/components/bottomContainer.vue

@@ -21,7 +21,7 @@
            </div>


            <div class="body" v-show="historytype == 0" ref="tableBox" @click="handleSelectClick($event)">
            <div class="body" v-if="historytype == 0" ref="tableBox" @click="handleSelectClick($event)">
                <ul class="title-header">
                    <li>
                        <span class="num">序号</span>
@@ -62,8 +62,9 @@
                </div>
            </div>

            <div class="current-table-body" ref="ElTableBox" v-show="historytype == 1">
                <el-table :data="policeSituationHistoryArr" style="width: 100%" :height="currentTableHeight"
            <div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
                <el-table :data="policeSituationHistoryArr" :key="currentPage" style="width: 100%"
                    :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                    <el-table-column prop="index" label="序号" min-width="6%"></el-table-column>
@@ -90,7 +91,7 @@
                    <el-table-column prop="MEMO" label="备注" min-width="12%"></el-table-column>
                </el-table>

                <div class="pages" ref="ElPagination">
                <div class="pages" ref="ElPagination" v-show="policeSituationHistoryArr.length > 0">
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
@@ -223,8 +224,14 @@
        // 获取table高度
        setTableHeight () {
            this.$nextTick(() => {
                if (this.$refs.ElTableBox && this.$refs.ElPagination) {
                    this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
                if (this.$refs.ElPagination) {
                    if (this.$refs.ElTableBox) {
                        this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
                    }
                } else {
                    if (this.$refs.ElTableBox) {
                        this.currentTableHeight = this.$refs.ElTableBox.offsetHeight
                    }
                }
            })
        },
@@ -275,6 +282,8 @@
        // 获取实时接警记录
        getAnswerPolices () {
            getAnswerPolices().then(res => {
                this.policeSituationRealtimeArr = []

                if (res.data.result.length > 0) {
                    this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
@@ -372,6 +381,8 @@
        // 获取历史接警记录
        getAlarmList (params) {
            getAlarmList({ ...params, count: this.pagesize }).then(res => {
                this.policeSituationHistoryArr = []

                if (this.res.data.data.records > 0) {
                    this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }