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">
            <div v-if="typeof item === 'string' || typeof item === 'number'">
              {{ item }}
            </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="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>
    </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);
    },
    handleClickPeople (item) {
      this.$router.push({
        path: `/main-shuju/visual-basicinfo-people/${item.uid}`,
      });
    },
  },
};
</script>

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

    &-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 {
          box-sizing: border-box;
          text-align: center;
          border: none;
          padding: 20px 5px;

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

          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>