elementUI table表动态添加无固定表头表身

elementUI table表动态添加无固定表头表身；表头样式更改；
自定义对象确认更改状态；
e8：async/await使用；

<template>
  <div class="rele-index">
    <div class="body">
      <div class="right-for-box" v-for="(item, index) in tableList" :key="index">
        <div class="right-for-title" @click="isActiveNow(item.UId, item, 1, index)">
          <span
            class="iconfont position-left"
            :class="openStatsus[item.UId] ? 'icon-shang' : 'icon-xia'"
          ></span>
          {{ item.EntityClassName }}
        </div>
        <div v-show="openStatsus[item.UId]">
          <el-table
            class="table-1"
            :header-cell-style="getRowClass"
            :data="item.tableData.tabB"
            height="400"
            style="width: 100%"
            @row-dblclick="getNewWindow"
          >
            <el-table-column
              v-for="info in item.tableData.tabH"
              :key="info.key"
              :property="info.key"
              :show-overflow-tooltip="true"
              align="center"
              :label="info.label"
            >
              <template slot-scope="scope">
              /*此处通过 slot 绑定过来的 property就是 el-table-column 所绑定的值 他会根据你所绑定的值 自动匹配 表身中你用来作为 键 的值*/
                {{ scope.row[scope.column.property] }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tableList: [
      	{
      		tableData:{
      			tabB:[],//表身
      			tabH:[]//表头
      		}
      	}
      ],
      openStatsus: {},
      pageSize: 20,
    };
  },

  components: {},

  computed: {
  },
  watch: {
  },
  mounted() {
  },

  created() {},

  methods: {
    //tab表头颜色
    getRowClass({ rowIndex }) {
      if (rowIndex == 0) {
        return "color:black;";
      } else {
        return " ";
      }
    },
    //请求当前条对应数据
    /* eslint-disable no-new */ //当前函数跳过el检测
    async isActiveNow(id, data, pages, index) {
    //在data中定义对象；用来查找当前ID是否存在，即动态显示/关闭当前条数据
      this.openStatsus[id] = !this.openStatsus[id];
      let arr,_this = this;
      if (this.openStatsus[id]) {
      //e8 async/await使用方式
        if (data.IsTarget) {
          arr = await this.getTopTitleInfoData2(this.EntityUId, id, pages);
        } else {
          arr = await this.getTopTitleInfoData(this.EntityUId, id, pages);
        }
        if (arr.RelationMappings && arr.RelationMappings.length > 0) {
          for (let ind = 0; ind < arr.RelationMappings.length; ind++) {
            const element = arr.RelationMappings[ind];
            //循环剔除json中的转义符
            String.prototype.replaceAll = function (FindText, RepText) {
              return this.replace(new RegExp(FindText, "g"), RepText);
            };
            //转译不过来则跳过此条
            try {
              element.RelationEntityJsonData = element.RelationEntityJsonData.replaceAll(
                "\r",
                ""
              );
              element.RelationEntityJsonData = JSON.parse(
                element.RelationEntityJsonData.replaceAll("\n", "")
              );
            } catch (error) {
            }
          }
            //elementUI中table表（动态实时添加）表头制作 取定义数组的第0条（前提是后续数组对象格式一样）
          arr.RelationMappings[0].RelationEntityJsonData.StdProp.forEach((item) => {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                // const element2 = item[key]; //标准属性的键值对
                let objHeader = {
                  label: key,
                  key: key,
                };
                _this.tableList[index].tableData.tabH.push(objHeader);
              }
            }
          });
			//elementUI中table表（动态实时添加）表身制作
          for (let inx = 0; inx < arr.RelationMappings.length; inx++) {
            const element = arr.RelationMappings[inx];
            let obj2,
              str = "{";
            element.RelationEntityJsonData.StdProp.forEach((item) => {
              for (const key2 in item) {
                if (Object.hasOwnProperty.call(item, key2)) {
                  let element2 = item[key2];
                  if (element2 == "" || element2 == null) {
                    element2 = "暂无数据";
                  }
                  let newJson = JSON.stringify(element);
                  //str很重要，表身的可以（key2）对应表头key（objHeader.key），element会自动查询对其；“data”自定义数据，点击时可以获取到（视情况自身所需而定）
                  str += `"${key2}":"${element2}","data":${newJson},`;
                }
              }
            });
            //此处转译视情况而定 非必须
            str = str.substr(0, str.length - 1);
            str += "}";
            obj2 = JSON.parse(str);
            //表身数据
            _this.tableList[index].tableData.tabB.push(obj2);
          }
        } else {
          this.$message({
            type: "info",
            message: "当前数据为空！",
          });
        }
      }
      this.$forceUpdate();
    },
    //循环分页 此处可提取公共函数来获取 默认与分页数据 视情况而定
    async topSizeChange(value, data, index) {
      let arr,
        _this = this;
      if (data.IsTarget) {
        arr = await this.getTopTitleInfoData2(this.EntityUId, data.UId, value);
      } else {
        arr = await this.getTopTitleInfoData(this.EntityUId, data.UId, value);
      }
      let a;
      if (arr.RelationMappings && arr.RelationMappings.length > 0) {
        for (let ind = 0; ind < arr.RelationMappings.length; ind++) {
          const element = arr.RelationMappings[ind];
          String.prototype.replaceAll = function (FindText, RepText) {
            return this.replace(new RegExp(FindText, "g"), RepText);
          };
          try {
            element.RelationEntityJsonData = JSON.parse(
              element.RelationEntityJsonData.replaceAll("\r\n", "")
            );
          } catch (error) {
          }
        }
        arr.RelationMappings[0].RelationEntityJsonData.StdProp.forEach((item) => {
          //item 是标准属性 每一条 对象
          for (const key in item) {
            if (Object.hasOwnProperty.call(item, key)) {
              // const element2 = item[key]; //标准属性的键值对
              let objHeader = {
                label: key,
                key: key,
              };
              _this.tableList[index].tableData.tabH.push(objHeader);
            }
          }
        });
        for (let inx = 0; inx < arr.RelationMappings.length; inx++) {
          const element = arr.RelationMappings[inx];
          let obj2,
            str = "{";
          element.RelationEntityJsonData.StdProp.forEach((item) => {
            for (const key2 in item) {
              if (Object.hasOwnProperty.call(item, key2)) {
                const element2 = item[key2];
                let newJson = JSON.stringify(element);
                str += `"${key2}":"${element2}","data":${newJson},`;
              }
            }
          });
          str = str.substr(0, str.length - 1);
          str += "}";
          obj2 = JSON.parse(str);
          _this.tableList[index].tableData.tabB.push(obj2);
        }
        this.$forceUpdate();
      } else {
        this.$message({
          type: "info",
          message: "当前数据为空！",
        });
      }
    },
    // title 数据请求
    async getTopTitleInfoData(sourecEntityUId, relationUId, pages) {
    //二次封装axios请求 函数 getTopTitleInfoData（请求接口API及参数）
      let res = await this.$server.getTopTitleInfoData();
      if (res.Code == 0) {
        return res.Data;
      } else {
        this.$message.error(res.Msg);
      }
    },
    async getTopTitleInfoData2(targetEntityUId, relationUId, pages) {
      let res = await this.$server.getTopTitleInfoData();
      if (res.Code == 0) {
        return res.Data;
      } else {
        this.$message.error(res.Msg);
      }
    },
    //跳转新界面但query所携带参数会显示在URL；建议换成 session
    getNewWindow(data) {
	let data = JSON.stringify(row);
      //const newRoter = this.$router.resolve({ path: "/main",query: { data: data } });
       const newRoter = this.$router.resolve({ path: "/main",});
       sessionStorage.setItem('data',data) //在新开界面去获取
      window.open(newRoter.href, "_blank");
    },
  },
};
</script>
<style lang="scss" scoped>
.rele-index {
  width: 100%;
  height: 100%;
  .title {
    width: 100%;
    height: 5%;
    background-color: #ccc;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .body {
    width: 100%;
    height: 95%;
    overflow-y: auto;
    .right-for-box {
      margin: 5px 0;
      padding: 0 20px;
      .right-for-title {
        height: 25px;
        width: 100%;
        line-height: 25px;
        text-align: center;
        position: relative;
        border: 1px solid #075663;
        border-radius: 5px;
        cursor: pointer;
        color: #075663;
        background-color: #ccc;
      }
      .position-left {
        position: absolute;
        top: 0;
        left: 0;
      }
      .table-1 {
        margin: 0 auto;
      }
      .pagination {
        text-align: end;
      }
    }
  }
}
</style>