|
|
@@ -3,7 +3,45 @@
|
|
|
<h1 class="title">@table-merge/element-ui</h1>
|
|
|
|
|
|
<h2 class="box">合并行</h2>
|
|
|
-
|
|
|
+ <div class="box">
|
|
|
+ <p>从第一行和第二例开始合并</p>
|
|
|
+ <pre>tableMergeElement(data, { range: { row: 1, col: 2 } })</pre>
|
|
|
+ <el-table :data="data1" :span-method="tableMergeElement(data1, { range: { row: [1, 10] } })" border>
|
|
|
+ <!-- <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />-->
|
|
|
+ <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>
|
|
|
<div class="box">
|
|
|
<p>多行合并</p>
|
|
|
<pre>tableMergeElement(data)</pre>
|
|
|
@@ -28,13 +66,7 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
|
|
|
- <div class="box">
|
|
|
- <p>从第一行和第二例开始合并</p>
|
|
|
- <pre>tableMergeElement(data, { range: { row: 1, col: 2 } })</pre>
|
|
|
- <el-table :data="data" :span-method="tableMergeElement(data, { range: { row: 1, col: 2 } })" border>
|
|
|
- <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
+
|
|
|
|
|
|
<h2 class="box">合并列</h2>
|
|
|
|
|
|
@@ -113,6 +145,18 @@ export default {
|
|
|
{ id: 4, a: 5, b: 8, c: 4, d: 1 },
|
|
|
{ id: 5, a: 5, b: 3, c: 3, d: 2 }
|
|
|
],
|
|
|
+ data1: [
|
|
|
+ { id: 1, projectName: 1, boxName: 1, onlineStatus: 1, runMode: 0 ,host_order:1,host_connect_status:0,host_fault:1,host_su_temp:11,host_re_temp:21,host_temp_diff:1},
|
|
|
+ { id: 2, projectName: 2, boxName: 2, onlineStatus: 1, runMode: 1 ,host_order:1,host_connect_status:1,host_fault:0,host_su_temp:12,host_re_temp:22,host_temp_diff:2},
|
|
|
+ { id: 3, projectName: 2, boxName: 3, onlineStatus: 2, runMode: 2 ,host_order:2,host_connect_status:0,host_fault:0,host_su_temp:11,host_re_temp:23,host_temp_diff:2},
|
|
|
+ { id: 4, projectName: 3, boxName: 4, onlineStatus: 1, runMode: 0 ,host_order:1,host_connect_status:1,host_fault:1,host_su_temp:12,host_re_temp:21,host_temp_diff:3},
|
|
|
+ { id: 5, projectName: 3, boxName: 5, onlineStatus: 2, runMode: 1 ,host_order:2,host_connect_status:0,host_fault:0,host_su_temp:13,host_re_temp:22,host_temp_diff:1},
|
|
|
+ { id: 6, projectName: 3, boxName: 6, onlineStatus: 1, runMode: 1 ,host_order:3,host_connect_status:1,host_fault:0,host_su_temp:11,host_re_temp:22,host_temp_diff:3},
|
|
|
+ { id: 7, projectName: 4, boxName: 7, onlineStatus: 1, runMode: 0 ,host_order:1,host_connect_status:1,host_fault:0,host_su_temp:11,host_re_temp:21,host_temp_diff:2},
|
|
|
+ { id: 8, projectName: 4, boxName: 8, onlineStatus: 2, runMode: 1 ,host_order:2,host_connect_status:0,host_fault:1,host_su_temp:11,host_re_temp:22,host_temp_diff:2},
|
|
|
+ { id: 9, projectName: 4, boxName: 9, onlineStatus: 2, runMode: 2 ,host_order:3,host_connect_status:1,host_fault:0,host_su_temp:12,host_re_temp:23,host_temp_diff:1},
|
|
|
+ { id: 10, projectName: 4, boxName: 10, onlineStatus: 4, runMode: 3 ,host_order:4,host_connect_status:0,host_fault:1,host_su_temp:13,host_re_temp:21,host_temp_diff:3}
|
|
|
+ ],
|
|
|
columns: [
|
|
|
{ prop: 'id', label: 'ID', align: 'center' },
|
|
|
{ prop: 'a', label: 'A列', align: 'center' },
|
