表格封装

<template>
  <div v-if="showTable" :style="cssVars">
    <a-table
        :columns="rowColumns"
        :customRow="onClickRow"
        :data-source="tableData"
        :loading="tableLoading"
        :pagination="false"
        :row-selection="isSelection ? rowSelection : null"
        :rowClassName="rowClassName"
        :rowKey="myRowKey"
        :scroll="{ x: 500 }"
    >
      <!--      :scroll="{ x: true }"-->
      <!--      :scroll="{ x: 500, y: 600 }"-->
      <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="text, record, index">
        <slot :name="slot" v-bind="{text, record, index}"></slot>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: "commonTable",
  props: {
    /*
    *  表头数据信息
    *  例：
    *  title: "校区名称",
    *  dataIndex: "campusName",
    *  key: "campusName",
    * */
    columns: {
      type: Array,
      default: function () {
        return []
      },
    },
    // 是否显示表格复选框
    isSelection: {
      type: Boolean,
      default: false
    },
    //是否显示表格单选框
    isRadio: {
      type: Boolean,
      default: false
    },
    // 表格数据内容
    tableData: {
      type: Array,
      default: function () {
        return []
      },
    },
    //是否开启表格加载动画
    tableLoading: {
      type: Boolean,
      default: false
    },
    //暂无数据的上下撑开的外边距
    noDataMg: {
      type: Number,
      default: 140
    },
    //表格最小高度
    tableMinHeight: {
      type: [Number, String],
      default: '558px'
    },
    //表格是否开启内容不换行切溢出悬浮显示
    ellipsis: {
      type: Boolean,
      default: true
    },
    isChangeRowColor: {
      type: Number,
      default: 0
    },
    //是否斑马纹
    zebraStripe: {
      type: [Number, Boolean, String],
      default: 0
    },
    myRowKey: {
      type: String,
      default: 'index'
    }
  },
  computed: {
    cssVars() {
      return {
        "--tableMinHeight": this.tableMinHeight,
        "--noDataMg": `${this.noDataMg}px`,
      }
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
              `selectedRowKeys: ${selectedRowKeys}`,
              "selectedRows: ",
              selectedRows
          );
          this.changeSelect(selectedRows, selectedRowKeys)
        },
        type: this.isRadio ? 'radio' : 'checkbox',
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows);
        },
      };
    },
  },
  data() {
    return {
      rowColumns: [],
      showTable: false,
      selectedRowKeys: []
    }
  },
  watch: {
    columns: {
      handler(arr) {
        this.rowColumns = this.columns.map(item => {
          return {...item, ellipsis: this.ellipsis}
        })
        console.log(this.rowColumns)
        this.showTable = true;
      },
      deep: true,
      immediate: true
    },
    tableData: {
      handler(arr) {
        console.log(arr)
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    binding() {

    },
    changeSelect(rows, keys) {

    },
    onClickRow(record) {

      return {
        on: {
          click: () => {
            if (this.isRadio) {
              let keys = []
              keys.push(record[this.myRowKey])
              this.selectedRowKeys = keys
            } else if (this.isSelection) {
              let keys = this.selectedRowKeys
              if(keys.length>0 && keys.includes(record[this.myRowKey])){
                keys.splice(keys.indexOf(record[this.myRowKey]),1)
              }else{
                keys.push(record[this.myRowKey])
              }
              this.selectedRowKeys = keys
            }

          }
        }
      }
    },
    //修改表格奇数偶数行样式
    rowClassName(record, index) {
      if (this.zebraStripe) {
        if (index % 2 === 0) {

          return 'table-back-odd-default'
        } else {

          return 'table-back-even-default'
        }
      }

    },
  }
}
</script>

<style lang="less" scoped>
::v-deep {

  .ant-table-tbody > tr > td {
    padding: 0 16px !important;
    height: 48px;
    line-height: 47px;
  }


  .ant-table {
    min-height: var(--tableMinHeight) !important;
  }

  .ant-empty-normal {
    margin: var(--noDataMg) 0 !important;
  }

}
</style>