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.
96 lines
2.0 KiB
96 lines
2.0 KiB
3 years ago
|
<template>
|
||
|
|
<lay-container fluid="true" class="content-box">
|
||
|
|
<lay-table v-if="dataColumn.length>0" :height="viewHeight+'px'" :columns="dataColumn" :data-source="dataList"
|
||
|
|
:row-style="rowStyle">
|
||
|
|
</lay-table>
|
||
|
|
</lay-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.content-box {
|
||
|
|
margin: 30px 10px;
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
clear: both;
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
ref
|
||
|
|
} from 'vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
setup() {
|
||
|
|
const dataColumn = ref([]);
|
||
|
|
const dataList = ref([]);
|
||
|
|
const dataColor = ref([]);
|
||
|
|
let colors = ["1E9FFF", "009688", "393D49", "5FB878"];
|
||
|
|
const rowStyle = function(row, rowIndex) {
|
||
|
|
let color = "";
|
||
|
|
for (let idx = 0; idx < dataColor.value.length; idx++) {
|
||
|
|
if (rowIndex > dataColor.value[idx]) color = "color:#" + colors[idx];
|
||
|
|
}
|
||
|
|
return color;
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
dataColumn,
|
||
|
|
dataList,
|
||
|
|
dataColor,
|
||
|
|
rowStyle,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
viewList: {
|
||
|
|
type: Object,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
viewHeight: {
|
||
|
|
type: Number,
|
||
|
|
default: () => 600,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initPage();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initPage() {
|
||
|
|
let dataColumn = [{
|
||
|
|
type: "number",
|
||
|
|
title: "序号",
|
||
|
|
width: "56"
|
||
|
|
}];
|
||
|
|
let dataList = [];
|
||
|
|
let dataColor = []
|
||
|
|
this.viewList.forEach((item) => {
|
||
|
|
if (item.length > 0) {
|
||
|
|
if (dataColumn.length == 1) {
|
||
|
|
for (let key in item[0]) {
|
||
|
|
let width = (key.indexOf("描述") != -1 || key == "文本" || key == "物料") ? "300px" :
|
||
|
|
"130px";
|
||
|
|
width = key.indexOf("编码") != -1 ? "200px" : width;
|
||
|
|
dataColumn.push({
|
||
|
|
key: key,
|
||
|
|
title: key.split('.').pop(),
|
||
|
|
align: "center",
|
||
|
|
width: width
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
item.forEach((item2) => {
|
||
|
|
dataList.push(item2);
|
||
|
|
});
|
||
|
|
dataColor.push(dataList.length - 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.dataColumn = dataColumn;
|
||
|
|
this.dataList = dataList;
|
||
|
|
this.dataColor = dataColor
|
||
|
|
},
|
||
|
|
cancelClick() {
|
||
|
|
this.$emit('cancelClick', false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|