表格封装

<template>
  <div v-if="showTable" :style="cssVars">
    <a-table
        ref="aTable"
        :columns="rowColumns"
        :customRow="onClickRow"
        :data-source="tableData"
        :loading="tableLoading"
        :pagination="false"
        :row-selection="isSelection ? rowSelection : null"
        :rowClassName="rowClassName"
        :rowKey="myRowKey"
        :scroll="{ x: 500 }"
        :bordered="isBorder"
    >
      <!--      :scroll="{ x: true }"-->
      <!-- @click.stop     :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: 'id'
    },
    isBorder:{
      type:Boolean,
      default:false
    },
    defaultKeys:{
      type:Array,
      default(){
        return []
      }
    }
  },
  computed: {
    cssVars() {
      return {
        "--tableMinHeight": this.tableMinHeight,
        "--noDataMg": `${this.noDataMg}px`,
      }
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys;
          this.selectedRows = selectedRows
          // console.log('触发table change事件',selectedRowKeys, selectedRows)
          this.$emit('getCheckedData', selectedRows)
        },
        type: this.isRadio ? 'radio' : 'checkbox',
        onSelect: (record, selected, selectedRows) => {
          // console.log('onSelect',record,  selectedRows);
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows);
        },
        getCheckboxProps: record => ({//重点部分
          props: {
            defaultChecked: this.selectedRowKeys.indexOf(record[this.myRowKey]) > -1 ? true : false,//defaultCheckedId里面是默认选中的id，判断是否含有这些id，有的那就选中，没有的就不选中
            id: record[this.myRowKey] + ''//使得id的数据类型为string
          }
        })
      };
    },
  },
  data() {
    return {
      rowColumns: [],
      showTable: false,
      selectedRowKeys: ['2'],
      selectedRows:[]
    }
  },
  watch: {
    columns: {
      handler(arr) {
        this.rowColumns = this.columns.map(item => {
          return {...item, ellipsis: this.ellipsis}
        })
        this.showTable = true;
      },
      deep: true,
      immediate: true
    },
    tableData: {
      handler(arr) {
        // console.log(arr)
      },
      deep: true,
      immediate: true
    },
    defaultKeys:{
      immediate:true,
      deep:true,
      handler(val){
        this.selectedRowKeys=val
      }
    }
  },


  methods: {
    binding() {

    },
    changeSelect(rows, keys) {

    },
    onClickRow(record) {
      return {
        on: {
          click: () => {
            let index = this.selectedRowKeys.indexOf(record[this.myRowKey]);
            if(this.isRadio){
              index == -1 ? this.selectedRowKeys = [record[this.myRowKey]] : []
              index == -1 ? this.selectedRows = [record] : []

            }else {
              index == -1 ? this.selectedRowKeys.push(record[this.myRowKey]) : this.selectedRowKeys.splice(index,1);
              index == -1 ? this.selectedRows.push(record) : this.selectedRows.splice(index,1);

            }
            this.$emit('getCheckedData', this.selectedRows)
          }
        }
      }
    },
    //修改表格奇数偶数行样式
    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: 24px;
  }


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

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

}
</style>
===========================================

<commonTable myRowKey="roomId" ref="classTable" :columns="columns" :isRadio="true" :isSelection="true"
             :tableData="tableData" tableMinHeight="500px" @getCheckedData="getCheckedRoom"
>
===============================================

columns: [
  {
    title: "序号",
    scopedSlots: {customRender: "index"},
  },
  {
    title: "教室",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "楼栋",
    dataIndex: "buildingName",
    key: "buildingName",
    width: 100,
  },
],