Ant desgin pro for vue框架表格 多选选中数据

表格中多有选中删除 选中导出等等功能 今天记录一下代码

         <s-table
                :scroll="{x:1200}"
                ref='table'
                size='default'
                row-key='id'
                :columns='columns'
                :data='loadData'
                :alert='true'
                 @expand='handleExpand'
                 :rowSelection='rowSelection'
                :showPagination='true'
            >

一个简单表格 在组件中官网有提供rowSelection方法，可以让Table的第一列成为联动的选择框以及通过rowSelection.selectedRowKeys来控制选项。

 selectedRowKeys控制的只是dataSource当前的序号 必须加上rowKey   row-key='id'

随后计算属性

 computed: {
            rowSelection() {
                return {
//data数据
                    selectedRowKeys: this.selectedRowKeys,
//方法
                    onChange: this.onSelectChange
                }
            }
        },

data中:

             // 勾选框id
                selectedRowKeys: [],
                // 勾选框数据
                 selectedRows: [],

方法:

      onSelectChange(selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },

然后可以直接使用

   // 确认导出标志牌数据
              exportUserModal() {
            let content = '确定将选择用户信息导出吗？'
            if (this.selectedRowKeys.length === 0)
                content = '确定将所有用户信息导出吗？'
            Modal.confirm({
                title: '导出用户',
                content: content,
                onOk: () => {
                    console.log(this.selectedRowKeys);
                        this.handleExportUser(this.selectedRowKeys)
                }
            })
            },