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

<template>
    <div class='compute-item'>
        <div class='compute-center'>
            <Select width='146' tipPlace='top' caption='楼层：' :selectdata='floorSelect' :placeholder='"请选择"' style='margin-right:12px'></Select>
            <el-input placeholder='搜索抽屉编号' size='small' prefix-icon='el-icon-search' v-model='searVal' style='width:192px;margin-right:12px'></el-input>
            <el-input placeholder='搜索出线规格' size='small' prefix-icon='el-icon-search' v-model='searVal' style='width:192px;margin-right:12px'></el-input>
            <el-input placeholder='搜索电井编号' size='small' prefix-icon='el-icon-search' v-model='searVal' style='width:192px;margin-right:12px'></el-input>
            <el-input placeholder='搜索控制回路' size='small' prefix-icon='el-icon-search' v-model='searVal' style='width:192px;margin-right:12px'></el-input>
        </div>
        <div class='compute-table'>
            <el-table
                v-if='table2.length>=0'
                v-loading='loading'
                :data='table2'
                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='50'></el-table-column>
                <el-table-column prop='a' label='抽屉编号'>
                    <template slot-scope='{row}'>{{row.drawernum||'--'}}</template>
                </el-table-column>
                <el-table-column prop='a' label='出线规格'>
                    <template slot-scope='{row}'>{{row.outspec||'--'}}</template>
                </el-table-column>
                <el-table-column prop='a' label='楼层'>
                    <template slot-scope='{row}'>{{row.floor||'--'}}</template>
                </el-table-column>
                <el-table-column prop='a' label='电井编号'>
                    <template slot-scope='{row}'>{{row.wellnum||'--'}}</template>
                </el-table-column>
                <el-table-column prop='brand' label='电箱编号'>
                    <template slot-scope='{row}'>{{row.boxnum||'--'}}</template>
                </el-table-column>
                <el-table-column prop='brand' label='供电容量（kw）'>
                    <template slot-scope='{row}'>{{row.capacitynum||'--'}}</template>
                </el-table-column>
                <el-table-column prop='brand' label='控制回路'>
                    <template slot-scope='{row}'>{{row.control||'--'}}</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>
    </div>
</template>
<script>
import Select from '@/components/Select/Select.vue'
import { mapGetters } from 'vuex'
export default {
    props: ['table2', 'total', 'page', 'size', 'loading'],
    data() {
        return {
            dataSelect2: [
                { id: 'test1', name: '选择项' },
                { id: 'test2', name: '单平米' },
                { id: 'test3', name: '下级分项' },
                { id: 'test4', name: '滑动平均滑动平均' }
            ],
            searVal: ''
        }
    },
    computed: {
        ...mapGetters(['floorSelect'])
    },
    components: { Select },
    methods: {
        pageChanged(page) {}
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
</style>
<style lang="less">
.compute-item {
    .compute-center {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
}
</style>