element动态多级表头

本文主要是介绍element动态多级表头，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

element动态多级表头

概述

循环遍历一级表头再遍历二级表头

代码

<template>
  <div style="border-radius: 10px;padding: 15px">
    <div class="scll"> {{ companymessage }}</div>

    <el-table
      :data="ParamList"
      border
      style="width: 100%">

      <div v-for="(i,index) in columndata" :key="i.bigName">
        <el-table-column
          v-if="index===1"
          :key="Math.random()"
          label="编号"
          align="center"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          v-if="index===1"
          :key="Math.random()"
          label="名称"
          align="center"
          prop="stationName"
          width="180">
        </el-table-column>
        <el-table-column
          :prop="i.nameProp"
          :key="Math.random()"
          :label="i.bigName"
          align="center"
        >


          <div v-for="etams in i.value">
            <el-table-column
              :prop="etams.nameProp"
              :key="Math.random()"
              align="center"
              :label="etams.subtitleName"
            >
              <template slot-scope="scope">
                <div class="textA">
                <el-tooltip placement="top">
                  <div slot="content"> {{ scope.row[etams.nameProp]  | rounding }}</div>
                        {{ scope.row[etams.nameProp]  | rounding }}
                </el-tooltip>
                </div>
              </template>
              <div v-for="etam in etams.value" v-if="'value' in etams">
                <el-table-column
                  v-show="false"
                  :key="Math.random()"
                  :label="etam.smallName.slice(etam.smallName.length-3,etam.smallName.length-1)"
                  :prop="etam.nameProp"
                  align="center"
                >
                  <template slot-scope="scope">
                <span>
                  {{ scope.row[etam.nameProp]  | rounding }}</span>
                  </template>
                </el-table-column>
              </div>

            </el-table-column>
          </div>

        </el-table-column>


      </div>


    </el-table>
  </div>

</template>

<script>
export default {
  name: "Sheetydb2021-3-24",
  filters: {
    rounding(value) {
      // console.log(typeof (value))
      // console.log(value)
      if (value === undefined || value === " ") return ""
      if (typeof (value) === 'number') {

        // console.log(value)
        return parseFloat(value).toFixed(2)
      } else
        return value

    }
  },
  props: {

    paramData: {
      type: Array,
      required: true
    },
    columndata: {
      type: Array,
      required: true
    },
    companymessage: {
      type: String,
      required: false
    }
  },


  data() {
    return {
      ParamList: [],

    };
  },
  watch: {
    paramData: {
      deep: true,
      immediate: true,
      handler(val) {

        this.ParamList = val;
      }
    },
    columndata: {
      deep: true,
      immediate: true,
      handler(val) {
        this.columndata = val;
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.ParamList) {
      return;
    }
    this.ParamList = null;
  },
  methods: {
    cutZero(old) {
      // 拷贝一份 返回去掉零的新串
      let newstr = old;
      // 循环变量 小数部分长度
      let leng = old.length - old.indexOf(".") - 1
      // 判断是否有效数
      if (old.indexOf(".") > -1) {
        // 循环小数部分
        for (let i = leng; i > 0; i--) {
          // 如果newstr末尾有0
          if (newstr.lastIndexOf("0") > -1 && newstr.substr(newstr.length - 1, 1) == 0) {
            let k = newstr.lastIndexOf("0");
            // 如果小数点后只有一个0 去掉小数点
            if (newstr.charAt(k - 1) == ".") {
              return newstr.substring(0, k - 1);
            } else {
              // 否则 去掉一个0
              newstr = newstr.substring(0, k);
            }
          } else {
            // 如果末尾没有0
            return newstr;
          }
        }
      }
      return old;
    }

  },
};
</script>
<style>
</style>
<style lang="scss" scoped>
.textA{
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scll {
  position: relative;

  //background: url(../img/tab_15.gif) repeat-x left;
  background-color: #BCF4EC;
  text-align: center;
  vertical-align: middle;
  text-indent: 15px;
}
</style>

这篇关于element动态多级表头的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！