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

<template>
  <div
    class="security-check-table-wrapper"
    :style="{ height: tableWrapperHeight }"
  >
    <a-table
      :data-source="tableData"
      :columns="columns"
      :row-key="rowKey"
      :row-selection="
        withSelection
          ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
          : null
      "
      :rowClassName="rowClassName"
      bordered
      :pagination = "pagination"
       @change="handleTableChange"
       :loading="loading"
    >
      <template
        v-if="withOperateColumn"
        slot="operation"
        slot-scope="text, record"
      >
        <div class="column-operate">
          <span class="cell-operate-edit" @click="editRow(record)">修改</span>
          <span class="cell-operate-delete" @click="deleteRow(record)"
            >删除</span
          >
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: "SecurityCheckTable",
  props: {
    height: {
      type: [Number, String],
      default: "50vh",
    },
    tableCols: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    rowKey: {
      type: String,
      default: "key",
    },
    withSelection: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    pagination:{
      type:Object,
      default: null,
    }
  },
  data() {
    return {
      selectedRowKeys: [],
    };
  },
  computed: {
    columns() {
      return this.tableCols.map((col) => {
        if (col.clickHandler) {
          col.customCell = () => {
            return {
              class: "cell-click",
              on: {
                click: col.clickHandler,
              },
            };
          };
        }
        if (col.children) {
          col.children.forEach((res) => {
            if (res.clickHandler) {
              res.customCell = () => {
                return {
                  class: "cell-click",
                  on: {
                    click: res.clickHandler,
                  },
                };
              };
            }
          });
        }
        return col;
      });
    },
    tableWrapperHeight() {
      return typeof this.height === "number" ? this.height + "px" : this.height;
    },
    withOperateColumn() {
      return this.columns.find((col) => col.dataIndex === "operation");
    },
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log(selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys;
    },
    rowClassName(index) {
      if (index.index % 2 == 0) {
        return "warning-row";
      } else {
        return "warning-rows";
      }
    },
    editRow(row) {
      console.log("edit");
    },
    deleteRow(row) {
      console.log("delete");
    },
    clickHandler(index) {
      console.log(index);
    },
    handleTableChange(pagination, filters, sorter){
      this.$emit("handleTableChange",pagination)
    }
  },
};
</script>

<style lang="scss" scoped>
.security-check-table-wrapper {
  width: 100%;
  ::v-deep .ant-table {
    width: 100%;
    .ant-table-thead {
      th {
        padding: 18px 12px;
      }
      .ant-table-column-title {
        font-size: 14px;
        font-family: Helvetica, "Microsoft YaHei";
        color: #101116;
        font-weight: bold;
      }
    }
    .ant-table-tbody {
      .warning-row {
        background-color: #f3f5f8;
        padding: 9px 16px;
      }
      .warning-rows {
        background-color: #fff;
        padding: 9px 16px;
      }
      td {
        font-size: 14px;
        font-family: Helvetica, "Microsoft YaHei";
        color: #101116;
        &.cell-click {
          color: #2d67e3;
          cursor: pointer;
        }
      }
      .column-operate {
        span {
          cursor: pointer;
          &:not(:last-child) {
            margin-right: 25px;
          }
          &.cell-operate-edit {
            color: #2d67e3;
          }
          &.cell-operate-delete {
            color: #ea4545;
          }
        }
      }
    }
  }
}
</style>