SZHY2.0/src/views/securityCheck/components/securityCheckTable.vue

<template>
  <div
    v-loading="loading"
    class="security-check-table-wrapper"
    :style="{ height: tableWrapperHeight }"
  >
    <a-table
      ref="table"
      :data-source="tableData"
      :columns="tableCols"
      bordered
      height="100%"
      :rowClassName="rowClassName"
    >
      <template v-if="withSelection">
        <a-table-column type="selection" width="35" />
      </template>
      <template v-for="col in cols">
        <NestTableColumn :key="col.prop" :col="col" />
      </template>
      <template v-if="withOperateColumn">
        <a-table-column label="操作" class-name="column-operate" :width="130">
          <template slot-scope="scope">
            <span class="cell-operate-edit" @click="editRow(scope.row)"
              >修改</span
            >
            <span class="cell-operate-delete" @click="deleteRow(scope.row)"
              >删除</span
            >
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script>
import NestTableColumn from "./nestTableColumn.vue";

export default {
  name: "SecurityCheckTable",
  components: { NestTableColumn },
  props: {
    height: {
      type: [Number, String],
      default: "50vh",
    },
    tableCols: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    withSelection: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    withOperateColumn: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      cols: [],
      data: [],
    };
  },
  computed: {
    tableWrapperHeight() {
      return typeof this.height === "number" ? this.height + "px" : this.height;
    },
  },
  watch: {
    tableCols: {
      handler(val) {
        this.cols = val;
      },
      deep: true,
      immediate: true,
    },
    tableData: {
      handler(val) {
        this.data = val;
      },
      deep: true,
      immediate: true,
    },
  },
  updated() {
    this.$refs["table"].doLayout();
  },
  methods: {
    rowClassName(index) {
      if (index.index % 2 == 0) {
        return "warning-row";
      } else {
        return "warning-rows";
      }
    },
    editRow(row) {
      console.log("edit");
    },
    deleteRow(row) {
      console.log("delete");
    },
  },
};
</script>

<style lang="scss" scoped>
.security-check-table-wrapper {
  width: 100%;
  ::v-deep .warning-row {
    background-color: #f3f5f8;
  }
  ::v-deep .warning-rows {
    background-color: #fff;
  }
  ::v-deep .ant-table-column-title {
    font-size: 14px;
    font-family: Helvetica, "Microsoft YaHei";
    color: #101116;
    font-weight: bold;
  }
  ::v-deep .ant-table {
    width: 100%;
    .ant-table__cell {
      .cell {
        // padding: 0 19px;
        font-size: 14px;
        font-family: Helvetica, "Microsoft YaHei";
        color: #101116;
      }
      &.ant-table-column--selection .cell {
        padding: 0;
        text-align: center;
      }
    }
    .ant-table__header {
      .ant-table__cell {
        > .cell {
          font-weight: bold;
        }
        &:not(.is-leaf) > .cell {
          text-align: center;
        }
      }
    }
    .ant-table__body {
      .cell .cell-click {
        color: #2d67e3;
        cursor: pointer;
      }
      .column-operate .cell {
        span {
          cursor: pointer;
          &:not(:last-child) {
            margin-right: 25px;
          }
          &.cell-operate-edit {
            color: #2d67e3;
          }
          &.cell-operate-delete {
            color: #ea4545;
          }
        }
      }
    }
  }
}
</style>