You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

306 lines
10 KiB

3 years ago
<template>
<div style="padding: 20px 0;">
<el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%" stripe height="800px">
<el-table-column type="index" label="序号" width="50" header-align="center" align="center" fixed="left">
</el-table-column>
<el-table-column prop="area" label="所属区域" header-align="center" width="100" fixed="left" align="center">
</el-table-column>
<el-table-column prop="target" label="控制工程名称" header-align="center" width="150" fixed="left">
</el-table-column>
<el-table-column prop="unit" label="管理单位" header-align="center" width="150" fixed="left">
</el-table-column>
<el-table-column prop="gate" label="闸门(孔×米)" header-align="center" width="150" fixed="left">
</el-table-column>
<el-table-column prop="gm" label="泵站规模×m3/s" header-align="center" width="150" fixed="left">
</el-table-column>
<el-table-column label="11月18日" header-align="center">
<el-table-column prop="x1" label="星期六" min-width="220" header-align="center">
</el-table-column>
</el-table-column>
<el-table-column label="11月19日" header-align="center">
<el-table-column prop="x2" label="星期日" min-width="220" header-align="center">
</el-table-column>
</el-table-column>
<el-table-column label="11月20日" header-align="center">
<el-table-column prop="x3" label="星期一" min-width="220" header-align="center">
</el-table-column>
</el-table-column>
<el-table-column label="11月21日" header-align="center">
<el-table-column prop="x4" label="星期二" min-width="220" header-align="center">
</el-table-column>
</el-table-column>
<el-table-column label="11月22日" header-align="center">
<el-table-column prop="x5" label="星期三" min-width="220" header-align="center">
</el-table-column>
</el-table-column>
<el-table-column label="11月23日" header-align="center">
<el-table-column prop="x6" label="星期四" min-width="220" header-align="center">
</el-table-column>
</el-table-column>
<el-table-column label="11月24日" header-align="center">
<el-table-column prop="x7" label="星期五" min-width="220" header-align="center">
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {
mergeTableRow
} from "@/utils/mergeTableRow"
export default {
data() {
return {
tableData: [],
list: [{
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '东线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '西线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}, {
area: '西线',
unit: '河道处',
target: '娄江枢纽',
gate: '14m',
gm: '3×5m3/s',
x1: "7:00-9:00两台外排",
x2: "",
x3: "7:00-9:00两台外排",
x4: "7:00-9:00两台外排",
x5: "7:00-9:00两台外排",
x6: "7:00-9:00两台外排",
x7: "7:00-9:00两台外排",
}]
}
},
methods: {
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
const span = column['property'] + '-span'
if (row[span]) {
return row[span]
}
}
},
created() {
this.tableData = mergeTableRow({
data: this.list,
mergeColNames: ["area"], // 需要合并的列,默认合并列相同的数据
firstMergeColNames: ["area"], // 受影响的列只合并以firstMerge为首的同类型数据
firstMerge: 'area' // 以哪列为基础进行合并,一般为第一列
})
}
}
</script>