wanda-bm-guide/src/views/room/room3.vue

<template>
    <div class='compute-item'>
        <div ref='tableBox3' class='compute-table'>
            <el-table
                :border='true'
                @row-click='innerTable'
                v-loading='loading'
                :max-height='tableMaxHeight'
                :data='table3'
                style='width: 100%'
                :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
            >
                <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
                <el-table-column prop :show-overflow-tooltip='true' label='设备简称' resizable min-width='300'>
                    <template slot-scope='{row}'>{{row.type_name||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='数量' :show-overflow-tooltip='true' width='60'>
                    <template slot-scope='{row}'>{{row.sl||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='品牌' :show-overflow-tooltip='true' min-width='300'>
                    <template slot-scope='{row}'>{{row.brand||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='型号' :show-overflow-tooltip='true' min-width='300'>
                    <template slot-scope='{row}'>{{row.sbxh||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='楼层' :show-overflow-tooltip='true' width='60'>
                    <template slot-scope='{row}'>{{row.floorcode||'--'}}</template>
                </el-table-column>
                <el-table-column prop :show-overflow-tooltip='true' label='生产厂商' min-width='300'>
                    <template slot-scope='{row}'>{{row.manufacturer||'--'}}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='total'
                :page-size='size'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
        </div>
        <el-dialog width='90%' :title='`${systemName}-${row.type_name}`' :visible.sync='innerVisible' append-to-body>
            <detail v-if='row' :row='row' :location='location' :floorChange='floorChange'></detail>
        </el-dialog>
    </div>
</template>

<script>
// import Select from '@/components/Select/Select.vue'
import { Select } from 'meri-design'
import Detail from './detail'

export default {
    props: ['table3', 'total', 'page', 'size', 'loading', 'floorChange', 'systemName', 'location'],
    data() {
        return {
            innerVisible: false,
            row: {},
            tableMaxHeight: 0,
        }
    },

    components: { Select, Detail },
    methods: {
        indexMethod(index) {
            return (this.page - 1) * this.size + index + 1
        },
        modalClose() {
            this.innerVisible = false
        },
        pageChanged(page) {
            this.$emit('Index2Emit', page)
        },
        innerTable(row) {
            this.row = row
            this.innerVisible = true
        },
        computedHeight() {
            this.$nextTick(() => {
                // 页面渲染完成后的回调
                this.tableMaxHeight = this.$refs.tableBox3.offsetHeight
            })
        },
    },
    updated() {
        this.$nextTick(() => {
            // 页面渲染完成后的回调
            this.tableMaxHeight = this.$refs.tableBox3.offsetHeight
        })
    },
}
</script>
<style lang="less" scoped>
</style>
<style lang="less">
.compute-item {
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
    .el-dialog {
        height: 95% !important;
        margin-top: 50px;
    }
    /deep/.el-table td {
        cursor: pointer;
    }
}
</style>