[JavaScript知识库]Ant Design of Vue里的表格使用练习

<template>
  <div>
     <!-- 表格 -->
    <a-table
      bordered
      row-key="ID"
      :pagination="pagination"
      :columns="columns"
      size="middle"
      :data-source="list"
      @change="onHandleTabPagination"
      :row-selection="rowSelection"
      :customRow="rowSelection.onCustomRow"
      :scroll="{ x: 2500, y: 500 }"
    >
    </a-table>
  </div>
</template>

<script>

export default{
  data(){
    return{
      // 选择框存放的数组
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  methods:{
  onHandleTabPagination(val){
  	console.log('点击的数据',val)
  }
  },
  computed:{
    rowSelection() {
      const that = this
      return {
        type: 'radio',
        columnWidth: 48,
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          that.selectedRowKeys = selectedRowKeys
          that.selectedRows = selectedRows
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: false,
            ID: record.ID,
          },
        }),
        onCustomRow(record) {
          return {
            on: {
              click: () => {
                let rowKeys = that.selectedRowKeys
                let rows = that.selectedRows
                if (rowKeys.length > 0 && rowKeys[0] === record.ID) {
                  rowKeys = []
                  rows = []
                } else {
                  // rowKeys.push(record.Card_ID)   写表格的唯一标识  
                     //      record.唯一标识
                  rowKeys = [record.ID]
                  rows = [record]
                }
                that.selectedRowKeys = rowKeys
                that.selectedRows = rows
              },
            },
          }
        },
      }
    },
  }
}
</script>