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

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>