1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <template>
| <div class="table-component assemble_table posR">
| <div class="posA_full">
| <el-table
| :data="tableData"
| border
| size="mini"
| height="100%"
| header-cell-class-name="blue-header">
| <el-table-column
| v-for="index of len * 2" :key="'prop_' + index"
| :prop="index % 2 ? 'prop_' + Math.ceil(index / 2) : 'value_' + Math.ceil(index / 2)"
| :label="index % 2 ? '属性名' : '值'"
| :min-width="index % 2 ? propMinWidth : valueMinWidth"
| :resizable="false"
| align="center">
| </el-table-column>
| </el-table>
| </div>
| </div>
| </template>
|
| <script>
| export default {
| name: 'assembleTable',
| props: {
| // 一行显示几组数据
| len: {
| type: Number,
| default: 2
| },
| // 属性名 列最小宽度
| propMinWidth: {
| type: Number,
| default: 150
| },
| // 值 列最小宽度
| valueMinWidth: {
| type: Number,
| default: 150
| },
| // 初始数据
| /*[{
| text: '冷却水流量',
| key: 'cooling_flow',
| val: 1,
| }]*/
| data: {
| type: Array,
| default() {
| return []
| }
| }
| },
| computed: {
| tableData() {
| let result = [];
| this.data.forEach((item, index)=>{
| let num = index % this.len;
| if(num == 0) {
| result.push({});
| }
| let last = result[result.length-1];
| last['prop_' + (num + 1)] = item.text;
| last['value_' + (num + 1)] = item.val;
| });
| return result;
| },
| }
| }
| </script>
|
| <style scoped>
| .table-component {
| width: 100%;
| height: 100%;
| }
| .posR {
| position: relative;
| }
| .posA_full {
| position: absolute;
| left: 0;
| top: 0;
| right: 0;
| bottom: 0;
| }
| </style>
|
|
