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

<template>
  <div class="m-table">
    <table class="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="table-header">
          <th class="table-header-th" v-for="item in header" :key="item">
            {{ item }}
          </th>
        </tr>
      </thead>
      <tbody class="table-body">
        <tr class="table-body-tr" v-for="(value, index) in list" :key="index">
          <td class="td" v-for="(item, indexs) in value" :key="indexs">
            <span v-if="typeof item === 'string' || typeof item === 'number'">{{
              item
            }}</span>
            <div v-if="typeof item === 'object' && 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.type == 'operate'"
              v-for="btn in item.list"
              :key="'operate' + index + btn"
              @click="handleClickBtn(index, btn)"
              >{{ btn }}</a
            >
          </td>
        </tr>
      </tbody>
    </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>
</template>

<script>
import ScreenLoading from "./loading";
import Vue from "vue";

export default {
  name: "table",
  components: {
    ScreenLoading,
  },
  props: {
    colList: {
      type: Array,
      default: () => {
        return [
          // {
          //   align: "center",
          //   width: "50%",
          // },
        ];
      },
    },
    header: {
      type: Array,
      required: false,
      default: () => {
        return [
          // "序号", "所属网格", "操作"
        ];
      },
    },
    list: {
      type: Array,
      required: false,
      default: () => {
        return [
          //   [
          //     1,
          //     "商丘路社区第一网格",
          //     {
          //       type: "operate",
          //       list: ["查看"],
          //     },
          //   ],
          //   [
          //     2,
          //     "商丘路社区第一网格",
          //     {
          //       type: "operate",
          //       list: ["查看"],
          //     },
          //   ],
        ];
      },
    },
    loading: {
      type: Boolean,
      default: true,
    },
    highlightTop3: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  watch: {},

  mounted() {},

  created() {},

  methods: {
    handleClickBtn(index, type) {
      this.$emit("operate", index, type);
    },
  },
};
</script>

<style lang="scss" scoped>
.m-table {
  .table {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: none;

    &-header {
      width: 100%;
      height: 50px;
      background: rgba(8, 37, 134, 0.85);
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;

      &-th {
        text-align: center;
        border: none;
        // width: calc(100% / 5);
      }
    }

    &-body {
      box-sizing: border-box;
      width: 100%;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;

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

        .td {
          text-align: center;
          border: none;
          padding: 10px 0;
          a {
            font-size: 16px;
            font-weight: 400;
            color: #e4dc00;
            position: relative;
            cursor: pointer;
          }
        }
      }

      &-tr:nth-child(2n) {
        background: rgba(16, 75, 164, 0.24);
      }

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

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

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