epmet-work-pc-chengyang/src/views/modules/visual/cpts/tb.vue

<template>
  <div>
    <div v-if="showTitle"
         class="m-title">
      <img class="title_img"
           src="@/assets/images/index/list-logo.png"
           alt />
      <div class="tip_title">{{titleName}}</div>
      <div class="title_line"></div>
    </div>

    <div class="m-table">
      <table class="g-table"
             border="0"
             cellspacing="0"
             cellpadding="0">

        <col :align="item.align"
             :width="item.width"
             :key="'col' + index"
             v-for="(item, index) in colList" />

        <thead>
          <tr class="g-table-header">
            <th class="g-table-header-th"
                v-for="item in header"
                :key="item">
              {{ item }}
            </th>
          </tr>
        </thead>
        <!-- <el-scrollbar :style="{height:treeHeight}"
                      class="g-scrollar"> -->
        <tbody v-if="!loading"
               class="g-table-body">
          <tr class="g-table-body-tr"
              v-for="(value, index) in list"
              :key="index"
              @click="handleClickRow(index)">
            <td class="td"
                v-for="(item, indexs) in value"
                :key="indexs">
              <div v-if="typeof item === 'string' || typeof item === 'number'"
                   :title="item">
                {{ item }}
              </div>

              <div v-if="typeof item === 'object' && item.type === 'img'">
                <!-- <span>{{  item.type+  item.src}}</span> -->
                <img style="width: 18px; height: 18px"
                     :src="item.src"
                     alt="" />
              </div>

              <div v-if="typeof item === 'object' && item && item.type == 'index'">
                <img v-if="highlightTop3 && index == 0"
                     src="@/assets/img/shuju/top/1.png"
                     alt="" />
                <img v-else-if="highlightTop3 && index == 1"
                     src="@/assets/img/shuju/top/2.png"
                     alt="" />
                <img v-else-if="highlightTop3 && index == 2"
                     src="@/assets/img/shuju/top/3.png"
                     alt="" />
                <span v-else>{{ index + 1 }}</span>
              </div>

              <a v-else-if="
                typeof item === 'object' && item && item.type == 'operate'
              "
                 v-for="btn in item.list"
                 :key="'operate' + index + btn"
                 @click.stop="handleClickBtn(index, btn)">{{ btn }}</a>
              <a v-else-if="
                typeof item === 'object' && item && item.type == 'people'
              "
                 @click="handleClickPeople(item)">{{ item.name }}</a>
            </td>
          </tr>
        </tbody>
        <!-- </el-scrollbar> -->
      </table>

      <div class="table-status"
           v-if="loading">
        <screen-loading>加载中</screen-loading>
      </div>

      <div class="table-status"
           v-if="list.length == 0 && !loading">
        <div class="no-data">
          <img src="@/assets/img/modules/visual/noData.png"
               class="no-data-img" />
        </div>
      </div>
    </div>

    <div class="m-pagination">
      <el-pagination :current-page="pageNo"
                     :page-size="pageSize"
                     background
                     :total="total"
                     layout="total">
      </el-pagination>
      <el-pagination :current-page="pageNo"
                     :page-size="pageSize"
                     background
                     :total="total"
                     layout="prev, pager, next, jumper, sizes"
                     @current-change="handlePageNoChange"
                     @size-change="handleSizeChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import ScreenLoading from "./loading";
import { mapGetters } from 'vuex'

export default {
  name: "table",
  components: {
    ScreenLoading,
  },
  props: {
    //是否显示标题，默认为true
    showTitle: {
      type: Boolean,
      default: true
    },
    //列表标题名称
    titleName: {
      type: String,
      default: "列表"
    },
    //各列对齐方式、宽度等属性
    colList: {
      type: Array,
      default: () => {
        return [
          // {
          //   align: "center",
          //   width: "50%",
          // },
        ];
      },
    },
    //表头
    header: {
      type: Array,
      required: false,
      default: () => {
        return [];
      },
    },
    //每行数据
    list: {
      type: Array,
      required: false,
      default: () => {
        return [];
      },
    },
    //数据总数
    total: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: true,
    },
    highlightTop3: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {

      pageSize: 10,
      pageNo: 1,
    };
  },
  watch: {},
  computed: {


    treeHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 300 + this.iframeHeight + 'px' : this.clientHeight - 300 + 'px'

    },
    treeWidth () {
      return document.documentElement.clientWidth
    },

    ...mapGetters(['clientHeight', 'iframeHeight'])
  },
  mounted () { },

  created () { },

  methods: {
    //点击某一行
    handleClickRow (index) {
      this.$emit("handleClickRow", index);
    },
    handleClickBtn (index, type) {
      this.$emit("operate", index, type);
    },
    handleClickPeople (item) {
      this.$router.push({
        path: `/main-shuju/visual-basicinfo-people/${item.uid}`,
      });
    },

    handlePageNoChange (val) {
      this.$emit("handlePageNoChange", val);
    },
    handleSizeChange (val) {
      this.$emit("handleSizeChange", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.m-title {
  display: flex;
  align-items: center;
  // margin-left: 24px;

  .title_img {
    width: 17px;
    height: 17px;
  }
  .tip_title {
    margin-left: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 22px;
  }

  .title_line {
    margin-left: 8px;
    width: 244px;
    height: 1px;
    background: linear-gradient(
      270deg,
      rgba(55, 198, 255, 0.1) 0%,
      #1995ff 100%
    );
  }
}
.m-table {
  margin-top: 9px;
  width: 100%;
  .g-table {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: none;
    table-layout: fixed;

    &-header {
      width: 100%;
      height: 56px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.65);
      line-height: 20px;

      &-th {
        text-align: left;
        border: none;
        padding: 18px 5px 18px 24px;
        // width: calc(100% / 5);
      }
    }

    &-body {
      box-sizing: border-box;
      width: 100%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;

      &-tr {
        box-sizing: border-box;
        width: 100%;
        min-height: 56px;

        .td {
          box-sizing: border-box;
          text-align: left;
          border: none;
          padding: 18px 5px 18px 24px;

          > div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: normal;
          }

          a {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1a95ff;
            line-height: 20px;
            cursor: pointer;
          }
        }
      }

      &-tr:nth-child(2n-1) {
        background: rgba(26, 149, 255, 0.15);
      }

      // &-tr:hover {
      //   background: url("../../../../assets/img/modules/visual/hover-bac.png")
      //     no-repeat center;
      //   background-size: 100% 100%;
      // }
    }

    /deep/ .el-scrollbar__wrap {
      width: 100% !important;
      overflow-x: hidden !important;
    }
  }
  .g-scrollar {
    width: 100%;
  }

  .table-status {
    position: relative;
    height: 300px;

    // 暂无数据
    .no-data {
      &-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
}

.m-pagination {
  box-sizing: border-box;
  margin-top: 24px;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;

    color: #ffffff;
    border-radius: 2px;
    border: 1px solid rgba(26, 149, 255, 0.45);
    background: #1a95ff;
  }

  /deep/ .el-pagination .el-pager li {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    border: 1px solid rgba(26, 149, 255, 0.45);
    background: #00023a;
  }

  /deep/ .el-pagination .btn-prev {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    border: 1px solid rgba(26, 149, 255, 0.45);
    background: #00023a;
  }

  /deep/ .el-pagination .btn-next {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    border: 1px solid rgba(26, 149, 255, 0.45);
    background: #00023a;
  }
  /deep/ .el-pagination__editor.el-input .el-input__inner {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    border: 1px solid rgba(26, 149, 255, 0.45);
    background: #00023a;
  }

  /deep/ .el-pagination .el-select .el-input .el-input__inner {
    margin-left: 14px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    border: 1px solid rgba(26, 149, 255, 0.45);
    background: #00023a;
  }
}
</style>