欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

效果如图
element table 键值对

相关标签: 组件