关于Ant Design of Vue中 的a-table一些使用问题

1.添加行点击及复选框

<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>

2.固定列重叠问题

官方给的建议

对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用。
若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。

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' },
    },
  ];

我在项目中为其他列添加width，scroll x设置为这些width之和，添加一个空列，让这列自适应宽度

{
  title: ''
},

3.纵向滚动条（表格高度随屏幕高度改变而改变）

<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
      })()
    }
  },