<template>
|
<div class="table-component assemble_table posR">
|
<div class="posA_full">
|
<el-table
|
:data="tableData"
|
border
|
size="mini"
|
height="100%"
|
:cell-class-name="cellClassName"
|
header-cell-class-name="blue-header"
|
>
|
<el-table-column
|
v-for="index of len * 2"
|
:key="'prop_' + index"
|
:label="index % 2 ? labelArr[0] : labelArr[1]"
|
:min-width="index % 2 ? propMinWidth : valueMinWidth"
|
:resizable="false"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<template v-if="index % 2">
|
{{ scope.row["prop_" + Math.ceil(index / 2)] }}
|
</template>
|
<template v-else>
|
<template v-if="scope.row['details_' + Math.ceil(index / 2)]">
|
<el-tooltip placement="right">
|
<template slot="content">
|
<div
|
v-for="(item, i) in scope.row[
|
'details_' + Math.ceil(index / 2)
|
]"
|
:key="'detail_' + i"
|
>
|
{{ item }}
|
</div>
|
</template>
|
<el-tag
|
:class="[
|
'tag',
|
{
|
normal: 0 == scope.row['value_' + Math.ceil(index / 2)],
|
warning: scope.row['value_' + Math.ceil(index / 2)],
|
},
|
]"
|
size="medium"
|
>{{ scope.row["value_" + Math.ceil(index / 2)] }}</el-tag
|
>
|
</el-tooltip>
|
</template>
|
<template v-else>
|
{{ scope.row["value_" + Math.ceil(index / 2)] }}
|
</template>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "assembleTable",
|
props: {
|
// 一行显示几组数据
|
len: {
|
type: Number,
|
default: 2,
|
},
|
// 属性名 列最小宽度
|
propMinWidth: {
|
type: Number,
|
default: 150,
|
},
|
labels: {
|
type: String,
|
default: "属性名,值",
|
},
|
// 值 列最小宽度
|
valueMinWidth: {
|
type: Number,
|
default: 150,
|
},
|
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;
|
last["details_" + (num + 1)] = item.details;
|
last["maxList"] = last["maxList"] || [];
|
last["minList"] = last["minList"] || [];
|
if (item.isMin) {
|
last["minList"].push(num + 1);
|
}
|
if (item.isMax) {
|
last["maxList"].push(num + 1);
|
}
|
});
|
// console.log('co')
|
return result;
|
},
|
labelArr() {
|
return this.labels.split(",");
|
},
|
},
|
methods: {
|
cellClassName(obj) {
|
let res = "";
|
let rowData = obj.row;
|
rowData.maxList.forEach((v) => {
|
if (obj.column.property.indexOf(v) > -1) {
|
res += "max-value";
|
}
|
});
|
rowData.minList.forEach((v) => {
|
if (obj.column.property.indexOf(v) > -1) {
|
res += res ? " min-value" : "min-value";
|
}
|
});
|
return res;
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.table-component {
|
width: 100%;
|
height: 100%;
|
}
|
>>> .max-value {
|
background: #900 !important;
|
}
|
>>> .min-value {
|
background: #090 !important;
|
}
|
.tag {
|
border: 0 none;
|
cursor: pointer;
|
color: #fff;
|
}
|
.tag.normal {
|
background: #117911;
|
}
|
.tag.warning {
|
background: #eba205;
|
}
|
.posR {
|
position: relative;
|
}
|
.posA_full {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
</style>
|
