element table 键值对

// 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/hg_xz@2x.png"
              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>

效果如图