sis_zhfx/src/views/NewPages/components/group-table.vue

<template>
  <el-table class="custom-table" :class="customClass" stripe :data="data.data" :height="height" style="width: 100%;cursor: pointer;" @cell-click="onClick" @header-click="onHeaderClick">
    <template v-for="col in data.column" :key="col">
      <el-table-column v-if="col.child && col.child.length > 0" :label="col.name" :key="col">
        <el-table-column
          v-for="sub in col.child"
          :key="sub"
          :label="sub.name"
          :prop="sub.field"
          :width="sub.width"
          :sortable="sub.sortable"
          :show-overflow-tooltip="!sub.slot"
          :fixed="sub.fixed"
          :align="sub.align ? sub.align : 'center'"
          :resizable="sub.resizable"
          :header-align="'center'"
        >
          <template v-if="sub.slot == true" #default="item">
            <slot :name="sub.field" :column="sub" :row="item.row" :all="item" :data="item.row[item.field]"></slot>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        v-if="!col.child"
        :label="col.name"
        :prop="col.field"
        :width="col.width"
        :sortable="col.sortable"
        :show-overflow-tooltip="!col.slot"
        :fixed="col.fixed"
        :align="col.align ? col.align : 'center'"
        :resizable="col.resizable"
        :header-align="'center'"
      >
        <template v-if="col.slot == true" #default="item">
          <slot :name="col.field" :column="col" :row="item.row" :all="item" :data="item.row[col.field]"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
</template>

<script>
export default {
  // 名称
  name: "ComTable",
  // 使用组件
  components: {},
  // 传入参数
  props: {
    /**
             * {
                    column: [{
                        name: "风机名称",
                        child:[{
                            field: "name",
                            width:'', // 宽度
                            click:function(){} // 点击事件
                            sortable:fasle,
                            slot:false,
                            fixed:false,
                            align:'center',
                            resizable :false,
                        }]
                    }],
                    total:200
                }
             */
    data: Object,
    height: {
      type: String,
      default: "",
    },
    pageSize: {
      type: Number,
      default: 0,
    },
    customClass: {
      type: String,
      default: "",
    },
    elPaggingProps: {
      type: Object,
      default: () => {
        return {
          layout: "total, sizes, prev, pager, next, jumper",
          // "page-sizes": [100, 200, 300, 400],
        };
      },
    },
  },
  emits: {
    onPagging: null,
    headerClick: null,
  },
  // 数据
  data() {
    return {
      currentPage: 1,
    };
  },
  computed: {
    tableData() {
      let that = this;
      if (this.sortCol == "") {
        return this.data.data;
      } else {
        let data = this.data.data;

        data.sort((a, b) => {
          let rev = 1;
          if (that.sortType == "ASC") rev = 1;
          else if (that.sortType == "DESC") rev = -1;

          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
          return 0;
        });
        return data;
      }
    },
    pageable() {
      return this.pageSize != 0;
    },
    pages() {
      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
      else return 0;
    },
    startRow() {
      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
      else return 0;
    },
    endRow() {
      if (this.pageable) return this.currentPage * this.pageSize;
      else return this.data.data.length;
    },
  },
  // 函数
  methods: {
    onClick(row, column, cell, event) {
      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
    },
    onHeaderClick(column, event) {
      this.$emit("headerClick", { event: event, col: column.rawColumnKey, data: this.data.data });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit("onPagging", {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        start: this.startRow,
        end: this.endRow,
      });
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {},
  updated() {},
};
</script>

<style lang="less">
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;
.com-table {
  width: 100%;
  border-collapse: collapse;

  thead {
    tr { 
      display: table;
      table-layout: fixed;
      width: 100%;

      th {
        background-color: fade(@darkBack, 20%);
        height: 30px;
        line-height: 30px;
        color: @titleGray;
        font-weight: 400;
        font-size: @fontsize-s;
        position: sticky;
        top: 0;
        cursor: pointer;

        &.light,
        &.always-light {
          color: @green;
        }
      }
    }
  }

  tbody {
    display: block;

    tr {
      display: table;
      table-layout: fixed;
      width: 100%;

      &:nth-child(2n) {
        background-color: fade(@rowGray, 20%);
      }

      td {
        padding: 0.556vh 0;
        color: @rowGray;
        text-align: center;
        font-size: @fontsize-s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &.light,
        &.always-light {
          color: @green !important;
        }

        &.num {
          font-family: "Bicubik";
          font-weight: 400;
        }
      }
    }
  }

  .el-pagination {
    color: @gray;
    .el-pagination__total {
      color: @gray;
    }

    button {
      &.btn-next,
      &.btn-prev {
        background: center center no-repeat fade(@gray, 20);
        color: @gray-l;
      }
      &:disabled {
        color: @gray-l;
        background-color: fade(@gray, 20);
        cursor: not-allowed;
      }
    }

    .el-pager li {
      color: @gray-l;
      background: fade(@gray, 20);
      &.active {
        color: @green;
      }
    }

    .el-input__inner {
      color: @gray-l;
      background: fade(@gray, 20);
      border: 1px solid fade(@gray, 20);
    }
  }
}
</style>