<template>
 <a-table
  bordered
  :scroll="{ x: scrollX, y: 600 }"
  v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}"
  :loading="loadingObj"
  v-on="listeners"
 >
  <template v-for="(val, slot) in $slots" :slot="slot">{{ this.$slots[slot] }}</template>
 </a-table>
</template>

<a-table
  bordered
  :scroll="{ x: scrollX, y: 600 }"
  v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}"
  :loading="loadingObj"
  v-on="listeners"
  :scopedSlots="$scopedSlots"
 >

render () {
  const on = {
   ...this.$listeners
  }
  const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.body, columns: this.header }}
  const table = (
   <a-table bordered props={props} scopedSlots={ this.$scopedSlots } on={on}>
   </a-table>
  )
  return (
   <div class="dc-table">
    { table }
   </div>
  )
 },
methods: () {
 
}

<dc-table
   ref="table"
   :columns="header"
   :dataSource="body"
   :loading="loading"
   :pagination="pagination"
   @change="handleTableChange"
   class="table-fit"
  >
 
    // 这里是表头的渲染，下面会讲到
   <template v-for="title in headerSlots" :slot="'$' + title">
    <span :key="title">
     <a-tooltip placement="right" trigger="click">
      <template slot="title">{{ getHeaderTarget(title).remark }}</template>{{ getHeaderTarget(title).title }}<a-icon type="info-circle"/>
     </a-tooltip>
    </span>
   </template>
  // 这里渲染列数据
   <template v-for="(item, index) in DECIMAL_PARAMS" :slot="item" slot-scope="text">
    <span :key="index">
     <!-- <span v-if="item === 'estimated_ROI'">
      <template v-if="text === 0">{{ text }}</template>
      <template v-else>{{ (text * 100) | NumberFixed }}%</template>
     </span> -->
     <span>{{ text | NumberFixed | NumberFormat }}</span>
    </span>
   </template>
  </dc-table>

 render () {
  const on = {
   ...this.$listeners
  }
  const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.body, columns: this.header }}
  // slots循环
  const slots = Object.keys(this.$slots).map(slot => {
   return (
    <template slot={slot}>{ this.$slots[slot] }</template>
   )
  })
  const table = (
   <a-table bordered props={props} scopedSlots={ this.$scopedSlots } on={on}>
    {slots} // 放这里
   </a-table>
  )
  return (
   <div class="dc-table">
    { table }
   </div>
  )
 },

<template>
 <div>
  <a-table
   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
   :columns="columns"
   :dataSource="data"
   :customRow="onClickRow"
  />
 </div>
</template>
<script>
 const columns = [
  {
   title: 'Name',
   dataIndex: 'name',
  },
  {
   title: 'Age',
   dataIndex: 'age',
  },
  {
   title: 'Address',
   dataIndex: 'address',
  },
 ];

 const data = [];
 for (let i = 0; i < 46; i++) {
  data.push({
   key: i,
   name: `Edward King ${i}`,
   age: 32,
   address: `London, Park Lane no. ${i}`,
  });
 }

 export default {
  data() {
   return {
    data,
    columns,
    selectedRowKeys: [], // Check here to configure the default column
    selectedRows: [] // 选中的整行数据
    loading: false,
   };
  },
  methods: {
   onSelectChange (selectedRowKeys, selectedRows) {
    this.selectedRowKeys = selectedRowKeys;
    this.selectedRows = selectedRows
   },
   onClickRow (record) {
    return {
     on: {
      click: () => {
       const rowKeys = this.selectedRowKeys
       const rows = this.selectedRows
       if (rowKeys.length > 0 && rowKeys.includes(record.key)) {
        rowKeys.splice(rowKeys.indexOf(record.key), 1)
        rows.splice(rowKeys.indexOf(record.key), 1)
       } else {
        rowKeys.push(record.key)
        rows.push(record)
       }
       this.selectedRowKeys = rowKeys
       this.selectedRows = rows
      }
     }
    }
   }
  },
 };
</script>

const columns = [
  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
  { title: 'Column 1', dataIndex: 'address', key: '1' },
  { title: 'Column 2', dataIndex: 'address', key: '2' },
  { title: 'Column 3', dataIndex: 'address', key: '3' },
  { title: 'Column 4', dataIndex: 'address', key: '4' },
  { title: 'Column 5', dataIndex: 'address', key: '5' },
  { title: 'Column 6', dataIndex: 'address', key: '6' },
  { title: 'Column 7', dataIndex: 'address', key: '7' },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  {
   title: 'Action',
   key: 'operation',
   fixed: 'right',
   width: 100,
   scopedSlots: { customRender: 'action' },
  },
 ];

{
 title: ''
},

<a-table
  :scroll={y: scrollY}
   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
   :columns="columns"
   :dataSource="data"
   :customRow="onClickRow"
  />

data(){
 return {
 scrollY: document.body.clientHeight - 386, // 表格竖向滚动条,386是页面其他元素的高度
 screenHeight: document.body.clientHeight, // 屏幕的高度
 }
} 

watch: {
  // 监听屏幕高度改变表格高度
  screenHeight (val) {
   // 初始化表格高度
   this.scrollY = val - 386
  }

 },

mounted () {
  // 监听屏幕高度
  window.onresize = () => {
   return (() => {
    window.screenHeight = document.body.clientHeight
    this.screenHeight = window.screenHeight
   })()
  }
 },