element table 键值对
程序员文章站
2022-06-16 08:42:44
...
// 2020.6.10 李瑶修改表格样式
<template>
<div>
<div class="resultTable bk_dialog_right">
<div class="bk_title">
<div
class="bk_dialog_close"
@click="closeDialog"
><i class="el-icon-close"></i></div>
</div>
<div class="bk_body">
<!-- title部分 -->
<div class="title flex f30 cor3 position-rela mar-b32">
<span>叠加分析检测报告</span>
<div class="flex1 position-r cursor"> <img
class="download"
src="@/assets/img/aaa@qq.com"
alt=""
@click="download"
>
<div class="f14 cor2c ver mar-l5">下载</div>
</div>
</div>
<!-- 表格部分 -->
<!-- 大盒子 -->
<div class="allTable">
<div class="projectBox flex f18 bcoree cor3 border6">项目基本信息</div>
<el-table
:data="tableData"
border
style="width: 100%"
:show-header="status"
size="small"
>
<el-table-column
align=center
prop="key1"
>
</el-table-column>
<el-table-column
align=center
prop="value1"
>
</el-table-column>
<el-table-column
align=center
prop="key2"
>
</el-table-column>
<el-table-column
align=center
prop="value2"
>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import { dragTool } from "@/utils/dragTool";
export default {
components: {},
name: "resultTable",
data() {
return {
tableData: [],
arr: [],
info: {
"地上总建筑面积(㎡)": "5000",
地块编码: "0802",
"容积率(≤)": "1.5",
"建筑密度(≤)": "16.5",
"建筑限高(≤)": "45.6",
建设单位: "海南天泓基业投资有限公司",
"机动车位(≥)": "610",
类别名称: "二类居住用地",
"绿地率(≥)": "40",
"非机动车位(≥)": "0",
项目名称: "海长流四期",
项目所属行业信息: "10",
项目用地类型: "8",
项目编号: "2018012903",
"高层建筑退东(米)": "15",
"高层建筑退北(米)": "25",
"高层建筑退南(米)": "15",
"高层建筑退西(米)": "20",
"高层建筑退西(米22)": "2faggg"
},
status: false
};
},
computed: {},
watch: {},
methods: {
//关闭弹窗
closeDialog() {
// 清除
// this.$parent.clean();
this.$parent.tableShow = false;
},
// 下载
download() {
console.log("这是下载");
},
handleClick(row) {
console.log(row);
}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {
let box = document.getElementsByClassName("bk_dialog_right");
// console.log(box);
dragTool.dragObj(box[3]);
let obj = this.info;
let i = 0;
let arr = [];
for (var key in obj) {
i++;
// console.log("这是i", i);
// console.log("这是i", key);
// console.log("这是obj[i]", obj[key]);
arr.push({
key: key,
value: obj[key]
});
}
let result = [];
console.log("这是arr", this.arr);
// 2.向上取整,有小数就整数部分加1
// Math.ceil(arr.length/2)
let times = Math.ceil(arr.length / 2);
for (let i = 0; i <= times; i++) {
// result.push(arr.splice(i, 4));
// console.log("这是arr.splice(0, 4)", arr.splice(0, 4));
let sArr = arr.splice(0, 2);
console.log("这是sArr", sArr);
sArr.map((item, index) => {
console.log("这是item", item);
if (index == 0) {
this.tableData.push({
key1: sArr[0] ? sArr[0].key : null,
value1: sArr[0] ? sArr[0].value : null,
key2: sArr[1] ? sArr[1].key : null,
value2: sArr[1] ? sArr[1].value : null
});
}
});
// result.push(arr.splice(0, 4));
}
console.log("这是this.tableData", this.tableData);
},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
distroyed() {}
};
</script>
<style lang='scss' scoped>
// 居中
.flex {
display: flex;
justify-content: center;
align-items: center;
}
// 居底
.flex1 {
display: flex;
justify-content: center;
align-items: flex-end;
}
.position-r {
position: absolute;
right: 0;
}
.position-rela {
position: relative;
}
.position-abso {
position: absolute;
}
.mar-l5 {
margin-left: 5px;
}
.mar-b32 {
margin-bottom: 26px;
}
.ver {
vertical-align: center;
}
.cor3 {
color: #333;
}
.cor2c {
color: #2ca5e2;
}
.bcoree {
background-color: #eee;
}
.f12 {
font-size: 12px;
}
.f14 {
font-size: 14px;
}
.f18 {
font-size: 18px;
}
.f30 {
font-size: 30px;
}
.cursor {
cursor: pointer;
}
.border6 {
border: 1px solid #666;
border-bottom: none;
}
.resultTable.bk_dialog_right {
position: absolute;
left: 300px;
top: 60px;
z-index: 101;
.el-icon-close {
cursor: pointer;
}
// 头部
.bk_title {
width: 614px;
height: 40px;
line-height: 40px;
background-color: #008fd4;
padding-left: 20px;
color: #fff;
position: relative;
font-size: 14px;
div.bk_dialog_close {
width: 48px;
height: 40px;
position: absolute;
right: 0;
top: 0;
text-align: center;
vertical-align: middle;
font-size: 18px;
// &:hover {
// background-color: #e81123;
// }
}
}
.bk_body {
background-color: white;
width: 100%;
height: 492px;
padding: 26px 20px;
.title {
font-family: SourceHanSansCN-Regular;
font-weight: bold;
img {
height: 23px;
width: 23px;
}
}
.allTable {
width: 574px;
max-height: 300px;
overflow: auto;
}
.projectBox {
width: 100%;
height: 46px;
}
/deep/ .el-table--border {
border-color: #666;
td {
border-color: #666;
}
&::after {
background-color: #666;
}
&::before {
background-color: #666;
}
}
}
}
</style>
效果如图