<template>
|
<div class="table-component">
|
<div class="table-container">
|
<el-table
|
:data="tableData"
|
stripe
|
size="mini"
|
header-row-class-name="header-primary"
|
header-cell-class-name="cell-class"
|
height="100%">
|
<el-table-column
|
v-for="index of len"
|
:key="'prop_' + index"
|
:label="label"
|
:min-width="valueMinWidth"
|
:resizable="false"
|
align="center">
|
<template slot-scope="scope">
|
{{ scope.row["value_" + index] }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "assembleTable2",
|
props: {
|
// 一行显示几组数据
|
len: {
|
type: Number,
|
default: 2,
|
},
|
// 属性名 列最小宽度
|
propMinWidth: {
|
type: Number,
|
default: 150,
|
},
|
label: {
|
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;
|
},
|
},
|
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;
|
}
|
.table-container {
|
border: 1px solid #FFFFFF;
|
height: 100%;
|
}
|
.el-table th.is-leaf {
|
border-bottom: 1px solid #FFFFFF;
|
}
|
</style>
|
