调整样式

src/App.vue

@@ -1,767 +1,144 @@
 <template>
-<div>
     <div>
-        <el-input type="text" placeholder="请输入项目名称" v-model="projectName" style="width: 150px;"/>
-        <el-input type="text" placeholder="请输入盒子名称" v-model="boxName" style="width: 150px;"/>
-        <el-select v-model="online" placeholder="请选择在线状态">
-            <el-option
-                    v-for="item in onlineOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-            </el-option>
-        </el-select>
-        <el-select v-model="mode" placeholder="请选择运行模式">
-            <el-option
-                    v-for="item in modeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-            </el-option>
-        </el-select>
-        <el-button>搜 索</el-button>
-    </div>
-    <el-table :header-cell-style="{backgroundColor: '#ccc'}"
-            :resizable="true"
-            class="el-table"
-            :data="tableData"
-            :cell-class-name="addClass"
-            row-key="id"
-            border
-            lazy
-            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-            style="width: 100%;color:black">
-        <el-table-column
-                label="序号"
-                width="50">
-        </el-table-column>
-
-        <el-table-column
-                prop="prj_name"
-                label="项目名称"
-                width="120">
-        </el-table-column>
-
-        <el-table-column
-                prop="box_name"
-                label="盒子名称"
-                width="120">
-        </el-table-column>
-        <el-table-column
-                prop="online_status"
-                label="在线状态" align="center"
-                width="120">
-
-                        <template slot-scope="scope">
-                                        <div style="background:yellowgreen;color: black;text-align: center"
-                                              v-if="scope.row.online_status === '在线'">{{scope.row.online_status}}</div>
-                            <div style="background:lightgrey;color: black;text-align: center"
-                                  v-else>{{scope.row.online_status}}</div>
-                        </template>
-        </el-table-column>
-        <el-table-column
-                prop="running_mode"
-                label="运行模式" align="center"
-                width="100">
-                        <template slot-scope="scope">
-                            <div style="background:darkgreen;color: black;text-align: center"
-                                 v-if="scope.row.running_mode === '制冷'">{{scope.row.running_mode}}</div>
-                            <div style="background:orange;color: black;text-align: center"
-                                 v-if="scope.row.running_mode === '采暖'">{{scope.row.running_mode}}</div>
-                            <div style="background:yellow;color: black;text-align: center"
-                                 v-if="scope.row.running_mode === '预热'">{{scope.row.running_mode}}</div>
-                            <div style="background:#b6aee3;color: black;text-align: center"
-                                 v-if="scope.row.running_mode === '通风'">{{scope.row.running_mode}}</div>
-
-                        </template>
-        </el-table-column>
-        <el-table-column label="主机控制器" align="center">
-            <el-table-column
-                    prop="host_connect_status"
-                    label="通讯状态" align="center"
-                    width="120">
-                                <template slot-scope="scope">
-                                <div style="background:yellowgreen;color: black;text-align: center;"
-                                     v-if="scope.row.host_connect_status === '正常'">{{scope.row.host_connect_status}}</div>
-                                <div style="background:yellow;color: black;text-align: center;"
-                                     v-if="scope.row.host_connect_status === '异常'">{{scope.row.host_connect_status}}</div>
-                                </template>
-            </el-table-column>
-            <el-table-column
-                    prop="host_fault" align="center"
-                    label="故障"
-                    width="120">
-                <template slot-scope="scope">
-                    <div style="background:yellow;color: black;text-align: center;"
-                         v-if="scope.row.host_fault === '有'">{{scope.row.host_fault}}</div>
-                    <div style="background:yellowgreen;color: black;text-align: center;"
-                         v-if="scope.row.host_fault === '无'">{{scope.row.host_fault}}</div>
-                </template>
-            </el-table-column>
-            <el-table-column
-                    prop="host_su_temp" align="center"
-                    label="供水水温(℃)"
-                    width="120">
-                <template slot-scope="scope">
-                    <div style="background:yellow;color: black;text-align: center;"
-                         v-if="scope.row.host_su_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.host_su_temp}}</div>
 
-                    <div style="background:yellowgreen;color: black;text-align: center;"
-                         v-else>{{scope.row.host_su_temp}}</div>
-                </template>
-            </el-table-column>
+        <el-table
+                :data="tableData"
+                :span-method="objectSpanMethod"
+                border
+                style="width: 100%; margin-top: 20px">
             <el-table-column
-                    prop="host_re_temp" align="center"
-                    label="回水水温(℃)"
-                    width="120">
-                <template slot-scope="scope">
-                <div style="background:yellow;color: black;text-align: center;"
-                     v-if="scope.row.host_re_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.host_re_temp}}</div>
-
-                <div style="background:yellowgreen;color: black;text-align: center;"
-                     v-else>{{scope.row.host_re_temp}}</div>
-                </template>
+                    prop="autoid"
+                    label="序号"
+                    width="180">
             </el-table-column>
             <el-table-column
-                    prop="host_temp_diff"
-                    label="温差" align="center"
-                    width="120">
-                <template slot-scope="scope">
-                    <div style="background:yellow;color: black;text-align: center;"
-                         v-if="scope.row.host_temp_diff >5">{{scope.row.host_temp_diff}}</div>
-
-                    <div style="background:yellowgreen;color: black;text-align: center;"
-                         v-else>{{scope.row.host_temp_diff}}</div>
-                </template>
+                    prop="name"
+                    label="项目名称"
+                    width="180">
             </el-table-column>
-        </el-table-column>
-        <el-table-column label="新风控制器">
             <el-table-column
-                    prop="nt_connect_status" align="center"
-                    label="通讯状态"
-                    width="120">
-                <template slot-scope="scope">
-                    <div style="background:yellowgreen;color: black;text-align: center;"
-                         v-if="scope.row.nt_connect_status === '正常'">{{scope.row.nt_connect_status}}</div>
-                    <div style="background:yellow;color: black;text-align: center;"
-                         v-if="scope.row.nt_connect_status === '异常'">{{scope.row.nt_connect_status}}</div>
-                </template>
+                    prop="boxname"
+                    label="盒子名称"
+                    width="180">
             </el-table-column>
             <el-table-column
-                    prop="nt_fault" align="center"
-                    label="故障"
-                    width="120">
-                <template slot-scope="scope">
-                    <div style="background:yellow;color: black;text-align: center;"
-                         v-if="scope.row.nt_fault === '有'">{{scope.row.nt_fault}}</div>
-                    <div style="background:yellowgreen;color: black;text-align: center;"
-                         v-if="scope.row.nt_fault === '无'">{{scope.row.nt_fault}}</div>
-                </template>
+                    prop="id"
+                    label="在线状态"
+                    width="180">
             </el-table-column>
             <el-table-column
-                    prop="nt_in_temp" align="center"
-                    label="送风温度(℃)"
-                    width="120">
-                <template slot-scope="scope">
-                    <div style="background:yellow;color: black;text-align: center;"
-                         v-if="scope.row.nt_in_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_temp}}</div>
-
-                    <div style="background:yellowgreen;color: black;text-align: center;"
-                         v-else>{{scope.row.nt_in_temp}}</div>
-                </template>
+                    prop="id"
+                    label="运行模式"
+                    width="180">
             </el-table-column>
-            <el-table-column
-                    prop="nt_in_humidity" align="center"
-                    label="送风湿度(%)"
-                    width="120">
-                <template slot-scope="scope">
-                    <div style="background:yellow;color: black;text-align: center;"
-                         v-if="scope.row.nt_in_humidity <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_humidity}}</div>
 
-                    <div style="background:yellowgreen;color: black;text-align: center;"
-                         v-else>{{scope.row.nt_in_humidity}}</div>
-                </template>
-            </el-table-column>
-            <el-table-column
-                    prop="nt_dew_point" align="center"
-                    label="露点(℃)"
-                    width="120">
-                <template slot-scope="scope">
-                    <div style="text-align: center;">{{scope.row.nt_dew_point}}</div>
-                </template>
-            </el-table-column>
-        </el-table-column>
-
-        <el-table-column label="换热站控制器">
-            <el-table-column
-                    prop="hex_connect_status"
-                    label="通讯状态"
-                    width="120">
-            </el-table-column>
-            <el-table-column
-                    prop="hex_fault"
-                    label="故障"
-                    width="120">
-            </el-table-column>
-            <el-table-column
-                    prop="hex_su_temp"
-                    label="供水水温(℃)"
-                    width="120">
-            </el-table-column>
-            <el-table-column
-                    prop="hex_re_temp"
-                    label="回水水温(℃)"
-                    width="120">
-            </el-table-column>
-            <el-table-column
-                    prop="hex_temp_diff"
-                    label="温差(℃)"
-                    width="120">
-            </el-table-column>
-            <el-table-column
-                    prop="hex_pump_status"
-                    label="水泵状态"
-                    width="120">
-            </el-table-column>
-        </el-table-column>
 
-        <el-table-column label="末端控制器">
             <el-table-column
-                    prop="end_exception_num"
-                    label="通讯异常数量"
-                    width="120">
+                    prop="id"
+                    label="状态"
+                    width="180">
             </el-table-column>
             <el-table-column
-                    prop="end_min_temp"
-                    label="最低室内温度(℃)"
-                    width="120">
+                    prop="name"
+                    label="编号">
             </el-table-column>
             <el-table-column
-                    prop="end_min_humidity"
-                    label="最低室内湿度(%)"
-                    width="120">
+                    prop="amount1"
+                    label="通讯状态">
             </el-table-column>
             <el-table-column
-                    prop="end_min_dew_point"
-                    label="最低室内露点(℃)"
-                    width="120">
+                    prop="amount2"
+                    label="故障">
             </el-table-column>
-            <el-table-column
-                    prop="end_max_temp"
-                    label="最高室内温度(℃)"
-                    width="120">
-            </el-table-column>
-            <el-table-column
-                    prop="end_max_humidity"
-                    label="最高室内湿度(%)"
-                    width="120">
-            </el-table-column>
-            <el-table-column
-                    prop="end_max_dew_point"
-                    label="最高室内露点(℃)"
-                    width="120">
-            </el-table-column>
-        </el-table-column>
-
-    </el-table>
-    <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 40]"
-            :page-size="pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            align="right"
-    >
-    </el-pagination>
-</div>
-
-
+<!--            <el-table-column-->
+<!--                    prop="amount3"-->
+<!--                    label="数值 3（元）">-->
+<!--            </el-table-column>-->
+        </el-table>
+    </div>
 </template>
 
 <script>
     export default {
-        methods:{
-            addClass({row,column,rowIndex,columnIndex}){
-                // console.log(columnIndex)
-                // console.log(row,column,rowIndex)
-                if(columnIndex === 3){
-                    if(row.online_status == '在线'){
-                        return 'cell-green';
-                    }else if(row.online_status == '离线'){
-                        return 'cell-grey';
-                    }
-                }
-                if(columnIndex === 4){
-                    if(row.running_mode == '制冷'){
-                        return 'cell-green';
-                    }else if(row.running_mode == '采暖'){
-                        return 'cell-grey';
-                    }else if(row.running_mode == '预热'){
-                        return 'cell-grey';
-                    }else if(row.running_mode == '通风'){
-                        return 'cell-grey';
+        data() {
+            return {
+                tableData: [{
+                    autoid:1,
+                    id: '正常',
+                    name: '天津温莎堡展厅',
+                    amount1: '234',
+                    amount2: '3.2',
+                    amount3: 10,
+                    boxname:'box1'
+                }, {
+                    autoid:2,
+                    id: '正常',
+                    name: '天津温莎堡展厅',
+                    amount1: '165',
+                    amount2: '4.43',
+                    amount3: 12,
+                    boxname:'box2'
+                }, {
+                    autoid:3,
+                    id: '正常',
+                    name: '滨江公寓',
+                    amount1: '324',
+                    amount2: '1.9',
+                    amount3: 9,
+                    boxname:'滨江公寓box'
+                }, {
+                    autoid:4,
+                    id: '正常',
+                    name: '九间堂75',
+                    amount1: '621',
+                    amount2: '2.2',
+                    amount3: 17,
+                    boxname:'九间堂75box'
+                }, {
+                    autoid:5,
+                    id: '正常',
+                    name: '涟城10-6',
+                    amount1: '539',
+                    amount2: '4.1',
+                    amount3: 15,
+                    boxname:'涟城10-6box'
+                }]
+            };
+        },
+        methods: {
+            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+                if (rowIndex % 2 === 0) {
+                    if (columnIndex === 0) {
+                        return [1, 2];
+                    } else if (columnIndex === 1) {
+                        return [0, 0];
                     }
                 }
             },
-            handleSizeChange(val) {
-                this.pageSize = val;
-                this.queryData();
-            },
-            handleCurrentChange(val) {
-                this.currentPage = val;
-                this.queryData();
-            },
-            queryData() {
-                this.$http.get('/tableData', {
-                    params: {
-                        pageSize: this.pageSize,
-                        currentPage: this.currentPage
-                    }
-                }).then(res => {
-                    this.tableData = res.data.data;
-                    this.total = res.data.total;
-                })
-            }
-        },
-        data() {
-            return {
 
-                pageSize: 10,
-                currentPage: 1,
-                total: 0,
-                online: '',
-                onlineOptions: [
-                    {
-                        value: 'on',
-                        label: '在线'
-                    },
-                    {
-                        value: 'off',
-                        label: '离线'
-                    }
-                ],
-                mode: '',
-                modeOptions: [
-                    {
-                        value: 'shutdown',
-                        label: '关机'
-                    },
-                    {
-                        value: 'cool',
-                        label: '制冷'
-                    },
-                    {
-                        value: 'heat',
-                        label: '采暖'
-                    },
-                    {
-                        value: 'dehumidify',
-                        label: '除湿'
-                    },
-                    {
-                        value: 'ventilate',
-                        label: '通风'
-                    },
-                    {
-                        value: 'preheat',
-                        label: '预热'
+            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+                //1列
+                if (columnIndex === 0) {
+                    return {
+                        rowspan: 1,
+                        colspan: 1
+                    };
+
+                }else if (columnIndex === 1){ //2列
+                    //第一行
+                    if (rowIndex == 0){
+                        return {
+                            rowspan: 2,
+                            colspan: 1
+                        };
+                    }else{
+                        return {
+                            rowspan: 0,
+                            colspan: 0
+                        };
                     }
-                ],
-                tableData: [{
-                    id:1,
-                    prj_name: '铂睿思雨花展厅',
-                    box_name: '铂睿思雨花展厅',
-                    online_status: '在线',
-                    running_mode: '制冷',
-                    host_connect_status: '异常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0',
-
-                },{
-                    id:2,
-                    prj_name: '北京中粮祥云',
-                    box_name: '北京中粮祥云',
-                    online_status: '离线',
-                    running_mode: '采暖',
-                    host_connect_status: '异常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0'
-                },{
-                    id:3,
-                    prj_name: '天津温莎堡展厅',
-                    box_name: '天津温莎堡展厅',
-                    online_status: '在线',
-                    running_mode: '预热',
-                    host_connect_status: '正常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0',
-                    children: [{
-                        id:33,
-                        prj_name: '滨江公寓',
-                        box_name: '盒子',
-                        online_status: '在线',
-                        running_mode: '制冷',
-                        host_connect_status: '异常',
-                        host_fault: '有',
-                        host_su_temp: '20.0',
-                        host_re_temp: '22.0',
-                        host_temp_diff: '2.0',
-                        nt_connect_status: '正常',
-                        nt_fault: '有',
-                        nt_in_temp: '20.0',
-                        nt_in_humidity: '91.0',
-                        nt_dew_point: '12.0',
-                        hex_connect_status: '正常',
-                        hex_fault: '无',
-                        hex_su_temp: '20.0',
-                        hex_re_temp: '22.0',
-                        hex_temp_diff: '2.0',
-                        hex_pump_status: '运行',
-                        end_exception_num: '11',
-                        end_min_temp: '11.0',
-                        end_min_humidity: '56',
-                        end_min_dew_point: '7.0',
-                        end_max_temp: '29',
-                        end_max_humidity: '87',
-                        end_max_dew_point: '9.0',
-                    }, {
-                        id:34,
-                        prj_name: '滨江公寓',
-                        box_name: '盒子',
-                        online_status: '在线',
-                        running_mode: '制冷',
-                        host_connect_status: '异常',
-                        host_fault: '有',
-                        host_su_temp: '20.0',
-                        host_re_temp: '22.0',
-                        host_temp_diff: '2.0',
-                        nt_connect_status: '正常',
-                        nt_fault: '有',
-                        nt_in_temp: '20.0',
-                        nt_in_humidity: '91.0',
-                        nt_dew_point: '12.0',
-                        hex_connect_status: '正常',
-                        hex_fault: '无',
-                        hex_su_temp: '20.0',
-                        hex_re_temp: '22.0',
-                        hex_temp_diff: '2.0',
-                        hex_pump_status: '运行',
-                        end_exception_num: '11',
-                        end_min_temp: '11.0',
-                        end_min_humidity: '56',
-                        end_min_dew_point: '7.0',
-                        end_max_temp: '29',
-                        end_max_humidity: '87',
-                        end_max_dew_point: '9.0',
-                    }]
-                },{
-                    id:4,
-                    prj_name: '御江金城2-107',
-                    box_name: '御江金城2-107',
-                    online_status: '离线',
-                    running_mode: '通风',
-                    host_connect_status: '正常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0'
-                },{
-                    id:5,
-                    prj_name: '国华印象15-102',
-                    box_name: '国华印象15-102',
-                    online_status: '在线',
-                    running_mode: '制冷',
-                    host_connect_status: '正常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0'
-                },{
-                    id:6,
-                    prj_name: '无庶3-102',
-                    box_name: '无庶3-102',
-                    online_status: '离线',
-                    running_mode: '制冷',
-                    host_connect_status: '异常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0'
-                },{
-                    id:7,
-                    prj_name: '揽江府1-14-6',
-                    box_name: '揽江府1-14-6',
-                    online_status: '在线',
-                    running_mode: '制冷',
-                    host_connect_status: '正常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0'
-                },{
-                    id:8,
-                    prj_name: '颐和美地美嘉苑14-4',
-                    box_name: '颐和美地美嘉苑14-4',
-                    online_status: '在线',
-                    running_mode: '制冷',
-                    host_connect_status: '正常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0'
-                },{
-                    id:9,
-                    prj_name: '九间堂75',
-                    box_name: '九间堂75',
-                    online_status: '离线',
-                    running_mode: '制冷',
-                    host_connect_status: '正常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0'
-                },{
-                    id:10,
-                    prj_name: '涟城10-6',
-                    box_name: '涟城10-6',
-                    online_status: '在线',
-                    running_mode: '制冷',
-                    host_connect_status: '正常',
-                    host_fault: '有',
-                    host_su_temp: '20.0',
-                    host_re_temp: '22.0',
-                    host_temp_diff: '2.0',
-                    nt_connect_status: '正常',
-                    nt_fault: '有',
-                    nt_in_temp: '20.0',
-                    nt_in_humidity: '91.0',
-                    nt_dew_point: '12.0',
-                    hex_connect_status: '正常',
-                    hex_fault: '无',
-                    hex_su_temp: '20.0',
-                    hex_re_temp: '22.0',
-                    hex_temp_diff: '2.0',
-                    hex_pump_status: '运行',
-                    end_exception_num: '11',
-                    end_min_temp: '11.0',
-                    end_min_humidity: '56',
-                    end_min_dew_point: '7.0',
-                    end_max_temp: '29',
-                    end_max_humidity: '87',
-                    end_max_dew_point: '9.0'
-                }, ]
+                }
             }
         }
-    }
+    };
 </script>
-<style>
-    .cell-green{
-        /*background: #6ea33f;*/
-    }
-    .cell-grey{
-        /*background: #9fa09f;*/
-    }
-    /* el-table样式 */
-    .el-table {
-        font-size: 14px;
-        color: #606266;
-        background-color: #FFFFFF;
-        border: 1px solid #EBEBEB;
-    }
-
-    /* el-table的表头样式 */
-    .el-table__header {
-        background-color: #F8F8F8;
-        color: #606266;
-        font-weight: bold;
-        border-bottom: 1px solid #EBEBEB;
-    }
-
-    /* el-table的表格内容样式 */
-    .el-table__body {
-        background-color: #FFFFFF;
-    }
-
-    /* el-table的表格行样式 */
-    .el-table__row {
-        background-color: #FFFFFF;
-        border-bottom: 1px solid #EBEBEB;
-    }
-
-    /* el-table的表格单元格样式 */
-    .el-table__cell {
-        padding: 10px;
-        text-align: center;
-        color: #606266;
-    }
-</style>

src/App1.vue

@@ -0,0 +1,797 @@
+<template>
+<div>
+    <div>
+        <el-input type="text" placeholder="请输入项目名称" v-model="projectName" style="width: 150px;"/>
+        <el-input type="text" placeholder="请输入盒子名称" v-model="boxName" style="width: 150px;margin-left: 5px"/>
+        <el-select v-model="online" placeholder="请选择在线状态" style="width: 150px;margin-left: 5px">
+            <el-option
+                    v-for="item in onlineOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+            </el-option>
+        </el-select>
+        <el-select v-model="mode" placeholder="请选择运行模式" style="width: 150px;margin-left: 5px">
+            <el-option
+                    v-for="item in modeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+            </el-option>
+        </el-select>
+        <el-button style="width: 150px;margin-left: 5px" type="primary">搜 索</el-button>
+    </div>
+    <el-table :header-cell-style="{backgroundColor: '#fff'}"
+            :resizable="true"
+            class="el-table"
+            :data="tableData"
+            :cell-class-name="addClass"
+            row-key="id"
+            :cell-style="cellStylePadding0"
+            border
+            lazy
+            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+            style="width: 100%;color:black;margin-top: 5px">
+        <el-table-column
+                label="序号"
+                width="50">
+            <template slot-scope="scope">
+                {{ (scope.$index+1)+(currentPage-1)*pageSize }}
+            </template>
+
+        </el-table-column>
+
+        <el-table-column
+                prop="prj_name"
+                label="项目名称"
+                width="120">
+        </el-table-column>
+
+        <el-table-column
+                prop="box_name"
+                label="盒子名称"
+                width="120">
+        </el-table-column>
+        <el-table-column
+                prop="online_status"
+                label="在线状态" align="center"
+                width="120">
+
+                        <template slot-scope="scope">
+                                        <div style="background:yellowgreen;color: black;text-align: center"
+                                              v-if="scope.row.online_status === '在线'">{{scope.row.online_status}}</div>
+                            <div style="background:lightgrey;color: black;text-align: center"
+                                  v-else>{{scope.row.online_status}}</div>
+                        </template>
+        </el-table-column>
+        <el-table-column
+                prop="running_mode"
+                label="运行模式" align="center"
+                width="100">
+                        <template slot-scope="scope">
+                            <div style="background:darkgreen;color: black;text-align: center"
+                                 v-if="scope.row.running_mode === '制冷'">{{scope.row.running_mode}}</div>
+                            <div style="background:orange;color: black;text-align: center"
+                                 v-if="scope.row.running_mode === '采暖'">{{scope.row.running_mode}}</div>
+                            <div style="background:yellow;color: black;text-align: center"
+                                 v-if="scope.row.running_mode === '预热'">{{scope.row.running_mode}}</div>
+                            <div style="background:#b6aee3;color: black;text-align: center"
+                                 v-if="scope.row.running_mode === '通风'">{{scope.row.running_mode}}</div>
+
+                        </template>
+        </el-table-column>
+        <el-table-column label="主机控制器" align="center">
+            <el-table-column
+                    prop="host_connect_status"
+                    label="通讯状态" align="center"
+                    width="120">
+                                <template slot-scope="scope">
+                                <div style="background:yellowgreen;color: black;text-align: center;"
+                                     v-if="scope.row.host_connect_status === '正常'">{{scope.row.host_connect_status}}</div>
+                                <div style="background:yellow;color: black;text-align: center;"
+                                     v-if="scope.row.host_connect_status === '异常'">{{scope.row.host_connect_status}}</div>
+                                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="host_fault" align="center"
+                    label="故障"
+                    width="120">
+                <template slot-scope="scope">
+                    <div style="background:yellow;color: black;text-align: center;"
+                         v-if="scope.row.host_fault === '有'">{{scope.row.host_fault}}</div>
+                    <div style="background:yellowgreen;color: black;text-align: center;"
+                         v-if="scope.row.host_fault === '无'">{{scope.row.host_fault}}</div>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="host_su_temp" align="center"
+                    label="供水水温(℃)"
+                    width="120">
+                <template slot-scope="scope">
+                    <div style="background:yellow;color: black;text-align: center;"
+                         v-if="scope.row.host_su_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.host_su_temp}}</div>
+
+                    <div style="background:yellowgreen;color: black;text-align: center;"
+                         v-else>{{scope.row.host_su_temp}}</div>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="host_re_temp" align="center"
+                    label="回水水温(℃)"
+                    width="120">
+                <template slot-scope="scope">
+                <div style="background:yellow;color: black;text-align: center;"
+                     v-if="scope.row.host_re_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.host_re_temp}}</div>
+
+                <div style="background:yellowgreen;color: black;text-align: center;"
+                     v-else>{{scope.row.host_re_temp}}</div>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="host_temp_diff"
+                    label="温差" align="center"
+                    width="120">
+                <template slot-scope="scope">
+                    <div style="background:yellow;color: black;text-align: center;"
+                         v-if="scope.row.host_temp_diff >5">{{scope.row.host_temp_diff}}</div>
+
+                    <div style="background:yellowgreen;color: black;text-align: center;"
+                         v-else>{{scope.row.host_temp_diff}}</div>
+                </template>
+            </el-table-column>
+        </el-table-column>
+        <el-table-column label="新风控制器">
+            <el-table-column
+                    prop="nt_connect_status" align="center"
+                    label="编号"
+                    width="120">
+                <template >
+                    <el-row><el-col>1</el-col></el-row>
+                    <el-row><el-col>2</el-col></el-row>
+                    <el-row><el-col>3</el-col></el-row>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="nt_connect_status" align="center"
+                    label="通讯状态"
+                    width="120">
+                <template slot-scope="scope">
+                    <el-row><el-col><div style="background:yellowgreen;color: black;text-align: center;"
+                                         v-if="scope.row.nt_connect_status === '正常'">{{scope.row.nt_connect_status}}</div>
+                        <div style="background:yellow;color: black;text-align: center;"
+                             v-if="scope.row.nt_connect_status === '异常'">{{scope.row.nt_connect_status}}</div></el-col></el-row>
+                    <el-row><el-col><div style="background:yellowgreen;color: black;text-align: center;"
+                                         v-if="scope.row.nt_connect_status === '正常'">{{scope.row.nt_connect_status}}</div>
+                        <div style="background:yellow;color: black;text-align: center;"
+                             v-if="scope.row.nt_connect_status === '异常'">{{scope.row.nt_connect_status}}</div></el-col></el-row>
+                    <el-row><el-col><div style="background:yellowgreen;color: black;text-align: center;"
+                                         v-if="scope.row.nt_connect_status === '正常'">{{scope.row.nt_connect_status}}</div>
+                        <div style="background:yellow;color: black;text-align: center;"
+                             v-if="scope.row.nt_connect_status === '异常'">{{scope.row.nt_connect_status}}</div></el-col></el-row>
+
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="nt_fault" align="center"
+                    label="故障"
+                    width="120">
+                <template slot-scope="scope">
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_fault === '有'">{{scope.row.nt_fault}}</div>
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-if="scope.row.nt_fault === '无'">{{scope.row.nt_fault}}</div></el-col></el-row>
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_fault === '有'">{{scope.row.nt_fault}}</div>
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-if="scope.row.nt_fault === '无'">{{scope.row.nt_fault}}</div></el-col></el-row>
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_fault === '有'">{{scope.row.nt_fault}}</div>
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-if="scope.row.nt_fault === '无'">{{scope.row.nt_fault}}</div></el-col></el-row>
+
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="nt_in_temp" align="center"
+                    label="送风温度(℃)"
+                    width="120">
+                <template slot-scope="scope">
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_in_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_temp}}</div>
+
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-else>{{scope.row.nt_in_temp}}</div></el-col></el-row>
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_in_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_temp}}</div>
+
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-else>{{scope.row.nt_in_temp}}</div></el-col></el-row>
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_in_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_temp}}</div>
+
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-else>{{scope.row.nt_in_temp}}</div></el-col></el-row>
+
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="nt_in_humidity" align="center"
+                    label="送风湿度(%)"
+                    width="120">
+                <template slot-scope="scope">
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_in_humidity <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_humidity}}</div>
+
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-else>{{scope.row.nt_in_humidity}}</div></el-col></el-row>
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_in_humidity <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_humidity}}</div>
+
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-else>{{scope.row.nt_in_humidity}}</div></el-col></el-row>
+                    <el-row><el-col><div style="background:yellow;color: black;text-align: center;"
+                                         v-if="scope.row.nt_in_humidity <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_humidity}}</div>
+
+                        <div style="background:yellowgreen;color: black;text-align: center;"
+                             v-else>{{scope.row.nt_in_humidity}}</div></el-col></el-row>
+
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="nt_dew_point" align="center"
+                    label="露点(℃)"
+                    width="120">
+                <template slot-scope="scope">
+                    <el-row><el-col><div style="text-align: center;">{{scope.row.nt_dew_point}}</div></el-col></el-row>
+                    <el-row><el-col><div style="text-align: center;">{{scope.row.nt_dew_point}}</div></el-col></el-row>
+                    <el-row><el-col><div style="text-align: center;">{{scope.row.nt_dew_point}}</div></el-col></el-row>
+
+                </template>
+            </el-table-column>
+        </el-table-column>
+
+        <el-table-column label="换热站控制器">
+            <el-table-column
+                    prop="hex_connect_status"
+                    label="通讯状态"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="hex_fault"
+                    label="故障"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="hex_su_temp"
+                    label="供水水温(℃)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="hex_re_temp"
+                    label="回水水温(℃)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="hex_temp_diff"
+                    label="温差(℃)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="hex_pump_status"
+                    label="水泵状态"
+                    width="120">
+            </el-table-column>
+        </el-table-column>
+
+        <el-table-column label="末端控制器">
+            <el-table-column
+                    prop="end_exception_num"
+                    label="通讯异常数量"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="end_min_temp"
+                    label="最低室内温度(℃)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="end_min_humidity"
+                    label="最低室内湿度(%)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="end_min_dew_point"
+                    label="最低室内露点(℃)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="end_max_temp"
+                    label="最高室内温度(℃)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="end_max_humidity"
+                    label="最高室内湿度(%)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="end_max_dew_point"
+                    label="最高室内露点(℃)"
+                    width="120">
+            </el-table-column>
+        </el-table-column>
+
+    </el-table>
+    <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            align="right"
+    >
+    </el-pagination>
+</div>
+
+
+</template>
+
+<script>
+    export default {
+        methods:{
+            cellStylePadding0({ row, column, ronIndex, columnIndex }) {
+                if (
+                    column.property == "nt_connect_status" ||
+                    column.property == "branchLastTime" ||
+                    column.property == "branchThisTime" ||
+                    column.property == "branchAddReduceQty" ||
+                    column.property == "branchAddReducePercent"
+                ) {
+                    return "padding:0";
+                } else {
+                    return "";
+                }
+                //console.log(column.property)
+            },
+            addClass({row,column,rowIndex,columnIndex}){
+                // console.log(columnIndex)
+                // console.log(row,column,rowIndex)
+                if(columnIndex === 3){
+                    if(row.online_status == '在线'){
+                        return 'cell-green';
+                    }else if(row.online_status == '离线'){
+                        return 'cell-grey';
+                    }
+                }
+                if(columnIndex === 4){
+                    if(row.running_mode == '制冷'){
+                        return 'cell-green';
+                    }else if(row.running_mode == '采暖'){
+                        return 'cell-grey';
+                    }else if(row.running_mode == '预热'){
+                        return 'cell-grey';
+                    }else if(row.running_mode == '通风'){
+                        return 'cell-grey';
+                    }
+                }
+            },
+            handleSizeChange(val) {
+                this.pageSize = val;
+                this.queryData();
+            },
+            handleCurrentChange(val) {
+                this.currentPage = val;
+                this.queryData();
+            },
+            queryData() {
+                this.$http.get('/tableData', {
+                    params: {
+                        pageSize: this.pageSize,
+                        currentPage: this.currentPage
+                    }
+                }).then(res => {
+                    this.tableData = res.data.data;
+                    this.total = res.data.total;
+                })
+            }
+        },
+        data() {
+            return {
+
+                pageSize: 10,
+                currentPage: 1,
+                total: 0,
+                online: '',
+                onlineOptions: [
+                    {
+                        value: 'on',
+                        label: '在线'
+                    },
+                    {
+                        value: 'off',
+                        label: '离线'
+                    }
+                ],
+                mode: '',
+                modeOptions: [
+                    {
+                        value: 'shutdown',
+                        label: '关机'
+                    },
+                    {
+                        value: 'cool',
+                        label: '制冷'
+                    },
+                    {
+                        value: 'heat',
+                        label: '采暖'
+                    },
+                    {
+                        value: 'dehumidify',
+                        label: '除湿'
+                    },
+                    {
+                        value: 'ventilate',
+                        label: '通风'
+                    },
+                    {
+                        value: 'preheat',
+                        label: '预热'
+                    }
+                ],
+                tableData: [{
+                    id:1,
+                    prj_name: '铂睿思雨花展厅',
+                    box_name: '铂睿思雨花展厅',
+                    online_status: '在线',
+                    running_mode: '制冷',
+                    host_connect_status: '异常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0',
+
+                },{
+                    id:2,
+                    prj_name: '北京中粮祥云',
+                    box_name: '北京中粮祥云',
+                    online_status: '离线',
+                    running_mode: '采暖',
+                    host_connect_status: '异常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0'
+                },{
+                    id:3,
+                    prj_name: '天津温莎堡展厅',
+                    box_name: '天津温莎堡展厅',
+                    online_status: '在线',
+                    running_mode: '预热',
+                    host_connect_status: '正常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0',
+                },{
+                    id:4,
+                    prj_name: '御江金城2-107',
+                    box_name: '御江金城2-107',
+                    online_status: '离线',
+                    running_mode: '通风',
+                    host_connect_status: '正常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0'
+                },{
+                    id:5,
+                    prj_name: '国华印象15-102',
+                    box_name: '国华印象15-102',
+                    online_status: '在线',
+                    running_mode: '制冷',
+                    host_connect_status: '正常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0'
+                },{
+                    id:6,
+                    prj_name: '无庶3-102',
+                    box_name: '无庶3-102',
+                    online_status: '离线',
+                    running_mode: '制冷',
+                    host_connect_status: '异常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0'
+                },{
+                    id:7,
+                    prj_name: '揽江府1-14-6',
+                    box_name: '揽江府1-14-6',
+                    online_status: '在线',
+                    running_mode: '制冷',
+                    host_connect_status: '正常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0'
+                },{
+                    id:8,
+                    prj_name: '颐和美地美嘉苑14-4',
+                    box_name: '颐和美地美嘉苑14-4',
+                    online_status: '在线',
+                    running_mode: '制冷',
+                    host_connect_status: '正常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0'
+                },{
+                    id:9,
+                    prj_name: '九间堂75',
+                    box_name: '九间堂75',
+                    online_status: '离线',
+                    running_mode: '制冷',
+                    host_connect_status: '正常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0'
+                },{
+                    id:10,
+                    prj_name: '涟城10-6',
+                    box_name: '涟城10-6',
+                    online_status: '在线',
+                    running_mode: '制冷',
+                    host_connect_status: '正常',
+                    host_fault: '有',
+                    host_su_temp: '20.0',
+                    host_re_temp: '22.0',
+                    host_temp_diff: '2.0',
+                    nt_connect_status: '正常',
+                    nt_fault: '有',
+                    nt_in_temp: '20.0',
+                    nt_in_humidity: '91.0',
+                    nt_dew_point: '12.0',
+                    hex_connect_status: '正常',
+                    hex_fault: '无',
+                    hex_su_temp: '20.0',
+                    hex_re_temp: '22.0',
+                    hex_temp_diff: '2.0',
+                    hex_pump_status: '运行',
+                    end_exception_num: '11',
+                    end_min_temp: '11.0',
+                    end_min_humidity: '56',
+                    end_min_dew_point: '7.0',
+                    end_max_temp: '29',
+                    end_max_humidity: '87',
+                    end_max_dew_point: '9.0'
+                }, ]
+            }
+        }
+    }
+</script>
+<style>
+    .textRadio >>> .el-radio__label {
+        display: none;
+    }
+    .branchWrap {
+        margin: 0 -10px;
+    }
+    .branchWrap div {
+        padding: 0 10px;
+        border-bottom: 1px solid #dfe6ec;
+    }
+    .branchWrap div:last-child {
+        border: none;
+    }
+    .lineHeight28 {
+        line-height: 28px;
+    }
+    .cell-green{
+        /*background: #6ea33f;*/
+    }
+    .cell-grey{
+        /*background: #9fa09f;*/
+    }
+    /* el-table样式 */
+    .el-table {
+        font-size: 14px;
+        color: #606266;
+        background-color: #FFFFFF;
+        border: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表头样式 */
+    .el-table__header {
+        background-color: #F8F8F8;
+        color: #606266;
+        font-weight: bold;
+        border-bottom: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表格内容样式 */
+    .el-table__body {
+        background-color: #FFFFFF;
+    }
+
+    /* el-table的表格行样式 */
+    .el-table__row {
+        background-color: #FFFFFF;
+        border-bottom: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表格单元格样式 */
+    .el-table__cell {
+        padding: 10px;
+        text-align: center;
+        color: #606266;
+    }
+
+</style>

src/App2.vue

@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <h3>多表头嵌套，内容可编辑</h3>
+        <tableTree :col="column1" :table-data="tableData" :operates="operates" @postArr="postArr" />
+    </div>
+</template>
+<script>
+    import tableTree from "./index";
+    import column1 from "./Column";
+
+    export default {
+        components: { tableTree },
+        data() {
+            return {
+                column1,
+                //如果后台返回的是二维数组需要自己转化下哦
+                tableData: [
+                    {
+                        data1: "100000",
+                        sales1: "566",
+                        sales2: "236",
+                        sales3: "522",
+                        month1SalesGrowthRatio: "0%",
+                        month2SalesGrowthRatio: "30%",
+                        month3SalesGrowthRatio: "20%",
+                        predictMonth1: "800",
+                    },
+                    {
+                        data1: "200000",
+                        sales1: "23",//这销售额老板会打人的吧
+                        sales2: "45",
+                        sales3: "565",
+                        month1SalesGrowthRatio: "30%",
+                        month2SalesGrowthRatio: "30%",
+                        month3SalesGrowthRatio: "50%",
+                        predictMonth1: "800",
+                    },
+                ],
+                operates: {
+                    width: 150,
+                    fixed: "right",
+                    list: [
+                        {
+                            title: "编辑",
+                            type:'text',
+                            method: (index, row) => {
+                                this.editRole(row);
+                            },
+                            code: "ui",
+                        },
+                        {
+                            title: "删除",
+                            type:'primary',
+                            method: (index, row) => {
+                                this.deleteRole(row);
+                            },
+                            code: "ui",
+                        },
+                    ],
+                },
+            };
+        },
+        methods: {
+            postArr(row) {
+                this.$message({
+                    type: "success",
+                    message: "修改成功!",
+                });
+            },
+            deleteRole(row){
+                this.$message({
+                    type: "success",
+                    message: "删除成功!",
+                });
+            },
+            editRole(row){
+                this.$message({
+                    type: "success",
+                    message: "编辑成功!",
+                });
+            }
+        },
+    };
+</script>
+<style scoped>
+    h3 {
+        text-align: left;
+    }
+</style>

src/App4.vue

@@ -0,0 +1,219 @@
+<template>
+    <div>
+        <el-table
+                :data="tableData"
+                style="width:100%;"
+                class="margin_b20 margin_t15"
+                :default-sort="{prop: 'addReducePercent', order: 'descending'}"
+                :cell-style="cellStylePadding0"
+                id="bigTable"
+        >
+            <el-table-column label="客户名称" prop="customeName" min-width="150px"></el-table-column>
+            <el-table-column label="客户地址" prop="customAddress" min-width="200px;"></el-table-column>
+
+            <el-table-column
+                    prop="addReduceQty"
+                    min-width="110"
+                    label="增减量"
+                    header-align="center"
+                    align="right"
+            >
+                <template slot-scope="scope">
+                    <div v-if="scope.row.addReduceQty>200" style="color:green">{{scope.row.addReduceQty}}</div>
+                    <div v-else style="color:red">{{scope.row.addReduceQty}}</div>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="addReducePercent"
+                    min-width="130"
+                    label="增减百分比"
+                    header-align="center"
+                    align="right"
+                    sortable
+                    :sort-method="handleSort"
+            ></el-table-column>
+            <el-table-column label="分路计量" header-align="center">
+                <el-table-column label="名称" prop="branchName">
+                    <template slot-scope="scope">
+                        <div class="branchWrap">
+                            <div
+                                    v-for="(item,index) in scope.row.branchInfo"
+                                    :key="index"
+                                    class="lineHeight28"
+                            >{{item.name}}</div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        :label="lastTime"
+                        header-align="center"
+                        align="right"
+                        min-width="120px"
+                        prop="branchLastTime"
+                >
+                    <template slot-scope="scope">
+                        <div class="branchWrap">
+                            <div
+                                    v-for="(item,index) in scope.row.branchInfo"
+                                    :key="index"
+                                    class="lineHeight28"
+                            >{{item.lastTimeQty}}</div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        :label="thisTime"
+                        header-align="center"
+                        align="right"
+                        min-width="120px"
+                        prop="branchThisTime"
+                >
+                    <template slot-scope="scope">
+                        <div class="branchWrap">
+                            <div
+                                    v-for="(item,index) in scope.row.branchInfo"
+                                    :key="index"
+                                    class="lineHeight28"
+                            >{{item.thisTimeQty}}</div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="增减量" header-align="center" align="right" prop="branchAddReduceQty">
+                    <template slot-scope="scope">
+                        <div class="branchWrap">
+                            <div
+                                    v-for="(item,index) in scope.row.branchInfo"
+                                    :key="index"
+                                    class="lineHeight28"
+                            ><span style="color:green;" v-if="item.addReduceQty>100">{{item.addReduceQty}}</span>
+                                <span style="color:red;" v-else>{{item.addReduceQty}}</span>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+    export default {
+
+        /*百分数转小数*/
+        toPoint(percent) {
+            var str = percent.replace("%", "");
+            str = str / 100;
+            return str;
+        },
+        data() {
+            return {
+                rowspan: "",
+                tableData: [
+                    {
+                        id: 1,
+                        name: "name-1",
+                        data: [{ amount: 100 }, { amount: 200 }, { amount: 300 }]
+                    },
+                    { id: 2, name: "name-2", data: [{ amount: 1002 }, { amount: 2002 }] },
+                    {
+                        id: 3,
+                        name: "name-3",
+                        data: [
+                            { amount: 1003 },
+                            { amount: 2003 },
+                            { amount: 3003 },
+                            { amount: 3004 }
+                        ]
+                    }
+                ]
+            };
+        },
+        methods: {
+            cellStylePadding0({ row, column, ronIndex, columnIndex }) {
+                if (
+                    column.property == "branchName" ||
+                    column.property == "branchLastTime" ||
+                    column.property == "branchThisTime" ||
+                    column.property == "branchAddReduceQty" ||
+                    column.property == "branchAddReducePercent"
+                ) {
+                    return "padding:0";
+                } else {
+                    return "";
+                }
+                //console.log(column.property)
+            },
+            handleSort(obja, objb) {
+                let a = this.toPoint(obja.addReducePercent);
+                let b = this.toPoint(objb.addReducePercent);
+                console.log(a, b);
+                if (a > b) {
+                    return 1;
+                } else {
+                    return -1;
+                }
+            },
+            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+                if ([0, 1].includes(columnIndex)) {
+                    const _row = this.rowspan[rowIndex];
+                    const _col = _row > 0 ? 1 : 0;  // 如果这一行隐藏了，这列也隐藏
+                    return {
+                        rowspan: _row,
+                        colspan: _col
+                    };
+                }
+            },
+            convertTableData() {
+                let data = this.tableData;
+                let arr = [];
+                let rowspan = [];
+                data.forEach(item => {
+                    //debugger
+                    for (let i = 0; i < item.data.length; i++) {
+                        let rdata = {
+                            ...item,
+                            ...item.data[i]
+                        };
+                        rdata.combineNum = item.data.length;
+                        delete rdata.data;
+                        // rdata={ id: 1,name: "name-1",amount: 1003}
+                        arr.push(rdata);
+                        // 生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏
+                        if (i == 0) {
+                            rowspan.push(item.data.length);
+                        } else {
+                            rowspan.push(0);
+                        }
+                    }
+                });
+                //console.log(arr)
+                this.tableData = arr;
+                console.log(this.tableData);
+                console.log(rowspan);
+                this.rowspan = rowspan;
+            }
+        },
+
+        created() {
+            this.convertTableData();
+        }
+    };
+</script>
+<style scoped>
+    .textRadio >>> .el-radio__label {
+        display: none;
+    }
+    .branchWrap {
+        margin: 0 -10px;
+    }
+    .branchWrap div {
+        padding: 0 10px;
+        border-bottom: 1px solid #dfe6ec;
+    }
+    .branchWrap div:last-child {
+        border: none;
+    }
+    .lineHeight28 {
+        line-height: 28px;
+    }
+</style>

src/Column.vue

@@ -0,0 +1,62 @@
+<template>
+    <el-table-column
+            :prop="col.field"
+            :label="col.title"
+            :align="alignType"
+            :fixed="col.fixed"
+            :width="col.width || ''"
+    >
+        <template v-for="(item, index) of col.children">
+            <!--这么写再来多少级嵌套都不怕了-->
+            <column-item v-if="item.children"
+                         :key="index" :col="item" v-on="$listeners" />
+            <el-table-column
+                    v-else-if="item.inputType == 'edit'"
+                    :label="item.title"
+                    :key="index + item.field"
+                    :width="col.width || ''"
+            >
+                <template slot-scope="scope">
+                    <el-input
+                            v-model="scope.row[item.field]"
+                            @change="changeAmount(scope.row, item.field)"
+                    >
+                        <i slot="suffix"
+                           class="el-icon-edit el-input__icon" />
+                    </el-input>
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                    v-else
+                    :key="index"
+                    :label="item.title"
+                    :prop="item.field"
+                    :align="alignType"
+                    :width="col.width || ''"
+            />
+        </template>
+    </el-table-column>
+</template>
+
+<script>
+    export default {
+        name: "ColumnItem",
+        props: {
+            col: {
+                type: Object,
+                default: () => [],
+            },
+            //判断单元格文字是居中还是左对齐显示
+            alignType: {
+                type: String,
+                default: "left", //默认居中
+            },
+        },
+        methods: {
+            async changeAmount(row) {
+                this.$emit('postArr',row)
+            },
+        },
+    };
+</script>

src/Vue5.vue

@@ -0,0 +1,268 @@
+<template>
+    <div>
+        <div>
+            <el-input type="text" placeholder="请输入项目名称" v-model="projectName" style="width: 150px;"/>
+            <el-input type="text" placeholder="请输入盒子名称" v-model="boxName" style="width: 150px;margin-left: 5px"/>
+            <el-select v-model="online" placeholder="请选择在线状态" style="width: 150px;margin-left: 5px">
+                <el-option
+                        v-for="item in onlineOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                </el-option>
+            </el-select>
+            <el-select v-model="mode" placeholder="请选择运行模式" style="width: 150px;margin-left: 5px">
+                <el-option
+                        v-for="item in modeOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                </el-option>
+            </el-select>
+            <el-button style="width: 150px;margin-left: 5px" type="primary">搜 索</el-button>
+        </div>
+        <el-table :data="tableData" :span-method="objectSpanMethod" border :cell-class-name="addClass">
+            <el-table-column prop="id" label="序号" width="70" align=‘center’></el-table-column>
+            <el-table-column prop="projectName" label="项目名称" align=‘center’></el-table-column>
+            <el-table-column prop="boxName" label="盒子名称" align=‘center’></el-table-column>
+            <el-table-column prop="onlineStatus" label="在线状态" align=‘center’></el-table-column>
+            <el-table-column prop="runMode" label="运行模式" align=‘center’></el-table-column>
+
+            <el-table-column prop="host" label="主机控制器" align=‘center’>
+                <el-table-column prop="host_order" label="编号" align=‘center’ style="text-align: center"></el-table-column>
+                <el-table-column prop="host_connect_status" label="通讯状态" align=‘center’></el-table-column>
+                <el-table-column prop="host_fault" label="故障" align=‘center’></el-table-column>
+                <el-table-column prop="host_su_temp" label="供水水温(℃)" align=‘center’></el-table-column>
+                <el-table-column prop="host_re_temp" label="回水水温(℃)" align=‘center’></el-table-column>
+                <el-table-column prop="host_temp_diff" label="温差" align=‘center’></el-table-column>
+            </el-table-column>
+
+            <el-table-column prop="newTrend" label="新风机控制器" align=‘center’>
+                <el-table-column prop="nt_order" label="编号" align=‘center’></el-table-column>
+                <el-table-column prop="nt_connect_status" label="通讯状态" align=‘center’></el-table-column>
+                <el-table-column prop="nt_fault" label="故障" align=‘center’></el-table-column>
+                <el-table-column prop="nt_in_temp" label="送风温度(℃)" align=‘center’></el-table-column>
+                <el-table-column prop="nt_in_humidity" label="送风湿度(%)" align=‘center’></el-table-column>
+                <el-table-column prop="nt_dew_point" label="露点(℃)" align=‘center’></el-table-column>
+            </el-table-column>
+
+            <el-table-column prop="hex" label="换热站控制器" align=‘center’>
+                <el-table-column prop="hex_order" label="编号" align=‘center’></el-table-column>
+                <el-table-column prop="hex_connect_status" label="通讯状态" align=‘center’></el-table-column>
+                <el-table-column prop="hex_fault" label="故障" align=‘center’></el-table-column>
+                <el-table-column prop="hex_su_temp" label="供水水温(℃)" align=‘center’></el-table-column>
+                <el-table-column prop="hex_re_temp" label="回水水温(℃)" align=‘center’></el-table-column>
+                <el-table-column prop="hex_temp_diff" label="温差" align=‘center’></el-table-column>
+            </el-table-column>
+
+
+        </el-table>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                online: '',
+                projectName:'',
+                boxName:'',
+                onlineOptions: [
+                    {
+                        value: 'on',
+                        label: '在线'
+                    },
+                    {
+                        value: 'off',
+                        label: '离线'
+                    }
+                ],
+                mode: '',
+                modeOptions: [
+                    {
+                        value: 'shutdown',
+                        label: '关机'
+                    },
+                    {
+                        value: 'cool',
+                        label: '制冷'
+                    },
+                    {
+                        value: 'heat',
+                        label: '采暖'
+                    },
+                    {
+                        value: 'dehumidify',
+                        label: '除湿'
+                    },
+                    {
+                        value: 'ventilate',
+                        label: '通风'
+                    },
+                    {
+                        value: 'preheat',
+                        label: '预热'
+                    }
+                ],
+                rowspan: "",
+                tableData: [
+                    {
+                        id: 1,
+                        projectName: "铂睿思雨花展厅",
+                        boxName: "铂睿思雨花展厅1#",
+                        onlineStatus: "在线",
+                        runMode: "通风",
+                        data: [{nt_order:1,nt_connect_status:"正常"},{host_order: 1,host_connect_status:"正常",host_fault:"无",host_su_temp:18.0,host_re_temp:19.1,host_temp_diff:1.1,nt_order:1,nt_connect_status:"正常"},{host_order: 1,host_connect_status:"正常",host_fault:"无",host_su_temp:18.0,host_re_temp:19.1,host_temp_diff:1.1,nt_order:1,nt_connect_status:"正常",nt_fault:"无",nt_in_temp:17.1,nt_in_humidity:76,nt_dew_point:15.2}]
+                    },
+                    {
+                        id: 2,
+                        projectName: "滨江公寓",
+                        boxName: "滨江公寓1#",
+                        onlineStatus: "在线",
+                        runMode: "通风",
+                        data: [{host_order: 1,host_connect_status:"正常",host_fault:"无",host_su_temp:18.0,host_re_temp:19.2,host_temp_diff:1.2}, {host_order: 2,host_connect_status:"正常",host_fault:"无",host_su_temp:18.0,host_re_temp:19.0,host_temp_diff:1.0}]
+
+                    },
+                    {
+                        id: 3,
+                        projectName: "无庶",
+                        boxName: "无庶1#",
+                        onlineStatus: "在线",
+                        runMode: "通风",
+                        data: [{host_order: 1,host_connect_status:"正常",host_fault:"无",host_su_temp:18.0,host_re_temp:19.3,host_temp_diff:1.3}, {host_order: 2,host_connect_status:"正常",host_fault:"无",host_su_temp:18.0,host_re_temp:19.0,host_temp_diff:1.0},{host_order: 3,host_connect_status:"正常",host_fault:"无",host_su_temp:18.0,host_re_temp:19.0,host_temp_diff:1.0}]
+
+                    }
+                ]
+            };
+        },
+        methods: {
+            addClass({row,column,rowIndex,columnIndex}){
+                console.log('addClass',row,column,rowIndex,columnIndex)
+                if(columnIndex === 1){
+                    return 'cell-green';
+                }
+                // console.log(columnIndex)
+                // console.log(row,column,rowIndex)
+                if(columnIndex === 3){
+                    if(row.onlineStatus == '在线'){
+                        return 'cell-green';
+                    }else if(row.onlineStatus == '离线'){
+                        return 'cell-grey';
+                    }
+                }
+                if(columnIndex === 4){
+                    if(row.running_mode == '制冷'){
+                        return 'cell-green';
+                    }else if(row.running_mode == '采暖'){
+                        return 'cell-grey';
+                    }else if(row.running_mode == '预热'){
+                        return 'cell-grey';
+                    }else if(row.running_mode == '通风'){
+                        return 'cell-grey';
+                    }
+                }
+            },
+            objectSpanMethod({row, column, rowIndex, columnIndex}) {
+                if ([0, 1, 2, 3, 4].includes(columnIndex)) {
+                    const _row = this.rowspan[rowIndex];
+                    const _col = _row > 0 ? 1 : 0;  // 如果这一行隐藏了，这列也隐藏
+                    return {
+                        rowspan: _row,
+                        colspan: _col
+                    };
+                }
+            },
+            convertTableData() {
+                let data = this.tableData;
+                let arr = [];
+                let rowspan = [];
+                data.forEach(item => {
+                    //debugger
+                    for (let i = 0; i < item.data.length; i++) {
+                        let rdata = {
+                            ...item,
+                            ...item.data[i]
+                        };
+                        rdata.combineNum = item.data.length;
+                        delete rdata.data;
+                        // rdata={ id: 1,name: "name-1",amount: 1003}
+                        arr.push(rdata);
+                        // 生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏
+                        if (i == 0) {
+                            rowspan.push(item.data.length);
+                        } else {
+                            rowspan.push(0);
+                        }
+                    }
+                });
+                //console.log(arr)
+                this.tableData = arr;
+                console.log(this.tableData);
+                console.log(rowspan);
+                this.rowspan = rowspan;
+            }
+        },
+
+        created() {
+            this.convertTableData();
+        }
+    };
+</script>
+<style>
+    .textRadio >>> .el-radio__label {
+        display: none;
+    }
+    .branchWrap {
+        margin: 0 -10px;
+    }
+    .branchWrap div {
+        padding: 0 10px;
+        border-bottom: 1px solid #dfe6ec;
+    }
+    .branchWrap div:last-child {
+        border: none;
+    }
+    .lineHeight28 {
+        line-height: 28px;
+    }
+    .cell-green{
+        /*background: #6ea33f;*/
+    }
+    .cell-grey{
+        /*background: #9fa09f;*/
+    }
+    /* el-table样式 */
+    .el-table {
+        font-size: 14px;
+        color: #606266;
+        background-color: #FFFFFF;
+        border: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表头样式 */
+    .el-table__header {
+        background-color: #F8F8F8;
+        color: #606266;
+        font-weight: bold;
+        border-bottom: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表格内容样式 */
+    .el-table__body {
+        background-color: #FFFFFF;
+    }
+
+    /* el-table的表格行样式 */
+    .el-table__row {
+        background-color: #FFFFFF;
+        border-bottom: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表格单元格样式 */
+    .el-table__cell {
+        padding: 10px;
+        text-align: center;
+        color: #606266;
+    }
+
+</style>

src/index.vue

@@ -0,0 +1,130 @@
+<template>
+    <div >
+        <el-table
+                ref="tab"
+                :show-summary="isShowSum"
+                :data="tableData"
+                :height="height"
+                @selection-change="handleSelectionChange"
+                style="width: 100%"
+        >
+            <el-table-column
+                    v-if="isShowBox"
+                    type="selection"
+                    width="55"/>
+            <template>
+                <column-item
+                        v-for="item in col"
+                        :key="item.label"
+                        :col="item"
+                        v-on="$listeners"
+                />
+            </template>
+            <template
+                    v-if="operates"
+            >
+                <el-table-column
+                        ref="fixedColumn"
+                        :width="operates.width"
+                        :fixed="operates.fixed"
+                        label="操作"
+                        :align="operates.align"
+                >
+                    <template slot-scope="scope">
+
+                        <div class="operate-group">
+                            <template v-for="(btn, leftOpkey) in operates.list">
+                                <el-button
+                                        :type="btn.type"
+                                        size="small"
+                                        :code="btn.code"
+                                        @click="btn.method(scope.$index, scope.row, $event)"
+                                >{{ btn.title }}</el-button>
+                            </template>
+                        </div>
+                    </template>
+                </el-table-column>
+            </template>
+            <template #empty>
+                <div class="empty"
+                     style="height: 200px">
+                    <span class="empty-desc">暂无数据</span>
+                </div>
+            </template>
+
+        </el-table>
+    </div>
+</template>
+<script>
+    import ColumnItem from "./column";
+    export default {
+        name: "TableItem",
+        components: {
+            ColumnItem,
+        },
+        props: {
+            operates: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            //表格数据
+            tableData: {
+                type: Array,
+                default: () => [],
+            },
+            //表头数据
+            col: {
+                type: Array,
+                default: () => [],
+            },
+            //是否在表格下方显示合计
+            isShowSum: {
+                type: Boolean,
+                default: false,
+            },
+            //判断单元格文字是居中还是左对齐显示,默认居中
+            alignType: {
+                type: String,
+                default: "center",
+            },
+            //设置表格高度,固定表头
+            height: {
+                type: String,
+                default: null, //默认不固定表头
+            },
+            //判断是否显示多选框
+            isShowBox: {
+                type: Boolean,
+                default: false, //默认不展示
+            },
+        },
+        data() {
+            return {
+
+            };
+        },
+        created() {},
+        mounted() {
+        },
+        methods: {
+            handleSelectionChange(row){
+                console.log(row)
+            }
+        },
+    };
+</script>
+<style>
+
+    /* 处理表格表头和内容错位问题 */
+    .el-table th.gutter {
+        display: table-cell !important;
+    }
+    .el-table th,
+    .el-table td {
+        padding: 7px 0 !important;
+    }
+</style>
+
+

src/main.js

@@ -10,7 +10,7 @@
 import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import App from './App.vue';
+import App from './Vue5.vue';
 
 Vue.use(ElementUI);