sis_zhfx/src/components/coms/table/table.vue

<template>
  <table class="com-table">
    <thead>
      <tr>
        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" @click="onSort(col)">{{ col.name }}</th>
      </tr>
    </thead>
    <el-scrollbar>
      <tbody :style="{ height: height }">
        <tr v-for="(row, index) of tableData" :key="index">
          <td v-for="(col, i) of data.column" :key="i" :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }" @mouseenter="hover(row, col)" @mouseleave="leave()">
            <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
          </td>
        </tr>
      </tbody>
    </el-scrollbar>
    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
  </table>
</template>

<script>
export default {
  // 名称
  name: "ComTable",
  // 使用组件
  components: {},
  // 传入参数
  props: {
    /**
             * {
                    column: [{
                        name: "风机名称",
                        field: "name",
                        type:'div',
                        is_num: false, // 是否为数字
                        is_light: false, // 是否高亮
                        template:function(){ }
                        click:function(){} //点击事件
                        sortable:fasle // 排序
                        // 新增用于在表格中使用动态三方组件
                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
                    },{
                        name: "冷却风温度",
                        field: "lqf",
                        is_num: true,
                        is_light: false
                    }],
                    data: [{
                        name: "1E01",
                        lqf: 15.78,
                        is_light: false
                    }],
                    total:200
                }
             */
    data: Object,
    // hover 样式
    showHover: {
      type: Boolean,
      default: true,
    },
    canScroll: {
      type: Boolean,
      default: true,
    },
    pageSize: {
      type: Number,
      default: 0,
    },
    height: {
      type: String,
      default: "",
    },
  },
  // 自定义事件
  emits: {
    // 分页事件
    onPagging: null,
  },
  // 数据
  data() {
    return {
      hoverRow: -1,
      hoverCol: -1,
      sortCol: "",
      sortType: "",
      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: {
    clearCheckBox(time){
      this.$nextTick(()=>{
        setTimeout(()=>{
          const domArray = document.querySelectorAll(".curCheckBox");
          for(let i=0;i<domArray.length;i++){
            domArray[i].checked=false;
          }
        },(time || 300));
      });
    },
    onClick(col, data) {
      if (col.click) col.click(event, data);
    },
    onSort(col) {
      if (col.sortable == true) {
        this.sortCol = col.field;
        switch (this.sortType) {
          case "":
            this.sortType = "DESC";
            break;
          case "DESC":
            this.sortType = "ASC";
            break;
          case "ASC":
            this.sortType = "";
            break;
        }
      }
    },
    template(col, data) {
      if (!col.template) return data;
      else return col.template(data);
    },
    hover(row, col) {
      if (this.showHover) {
        this.hoverRow = row;
        this.hoverCol = col;
      }
    },
    leave() {
      this.hoverRow = -1;
      this.hoverCol = -1;
    },
    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%);
        padding: 1.481vh 0;
        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;

        &.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>