# VirtualTable 虚拟表格

> 以[vxe-table(v3+)](https://vxetable.cn/v3) 为基础封装的虚拟表格组件,涵盖了基础table表格基础功能及列自定义render函数、多选、合计等功能


::: demo

```html

<template>
    <div>
        <el-card>
            <y-virtual-table
                    :data="tableData"
                    :columns="columns"
                    :border="true"
                    size="small"
                    @data-change="tableChange"
                    :summary-method="getSummaryMethod"
                    show-footer
                    v-bind="$attrs"
                    v-on="$listeners"
            ></y-virtual-table>
        </el-card>

    </div>

</template>

<script>
    const tableData = []
    for (let i = 0; i < 100000; i++) {
        const item = {
            id: i + 1,
            name: `小张${i + 1}`,
            age: i * Math.random() * 10,
            salary: i * Math.random() * 1000
        }
        tableData.push(item)
    }
    export default {
        name: '',
        components: {},
        data() {
            return {
                tableData: [],
                tData: [],
                columns: [
                    {
                        type: 'selection',
                        reserveSelection: true,
                        selectable: ({row}) => {
                            return row.id % 2 === 0
                        },
                        width: 60
                    },
                    {
                        prop: 'id',
                        label: '编号'

                    },
                    {
                        prop: 'name',
                        label: '姓名',
                        isEdit: true,
                        render: (h, {row}) => {
                            return <el-input v-model={row.name}></el-input>
                        }
                    },
                    {
                        prop: 'age',
                        label: '年龄'
                    },
                    {
                        prop: 'salary',
                        label: '工资'
                    },
                    {
                        label: '操作',
                        prop: 'action',
                        fixed: 'right',
                        width: 180,
                        render: (h, {row, index}) => {
                            return <div>
                                <el-button type='text' onClick={(e) => this.handleClick(row, index)}>编辑商品</el-button>
                                <el-button type='text'>删除</el-button>
                                <el-button type='text'>启用</el-button>
                            </div>
                        }
                    }
                ]
            }
        },
        mounted() {
            this.tableData = Object.freeze(tableData)
        },
        methods: {
            tableChange(data) {
                this.tData = data
            },
            handleChanged(e) {
                console.log('input', e)
            },
            handleClick(row, index) {
                console.log(row, 'edit')
            },
            getSummaryMethod({columns, data}) {
                const sums = []
                columns.forEach((column, index) => {
                    if (column.property === 'id') {
                        sums[index] = '合计'
                        return
                    }
                    if (column.property === 'age') {
                        const values = data.map(item => Number(item[column.property]))
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr)
                                if (!isNaN(value)) {
                                    return prev + curr
                                } else {
                                    return prev
                                }
                            }, 0)
                            sums[index] += ' 岁'
                        } else {
                            sums[index] = 'N/A'
                        }
                    } else {
                        sums[index] = '-'
                    }
                })
                return sums
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

```

:::

## VirtualTable Attributes

| 参数                    | 说明                                                  | 类型    | 可选值            | 默认值 |
| ----------------------- | ---------------------------------------------------- | ------- | ----------------- | ------ |
| data                   | 显示的数据                                            | array  | -                 | -      |
| columns                   | 表格列                                            | array  | -                 | -      |
| border                   | 是否带有边框                                            | array  | -                 | -      |
| height                   | 表格高度                                            | number | string  | auto, %, px           | 980     |
| maxHeight                   | 表格最大高度                                       | number | string| auto, %, px                 | -      |
| size                   | 表格的尺寸                                            | string  | medium, small, mini                 | -      |
| hasBatchButton                   | 多选时(column中有type为selection的列)是否展示底部操作条                                            | boolean  | -                 | true      |
| leftOffset                   | 多选操作条距左侧距离                                            | number | string| -                 | 200      |
| showSelectCount                   | 多选时是否展示被选中的数量                                            | boolean  | -                 | true      |
| headerCellClassName                   | 给表头的单元格附加 className                                            | string|function  | -                 | -      |
| rowClassName                   | 给行附加 className                                            | string|function  | -                 | -      |
| cellClassName                   | 给单元格附加 className                                            | string|function  | -                 | -      |
| summaryMethod                   | 自定义的合计计算方法(用法与el-table中一致)	                                            | Function({ columns, data })	  | -                 | -      |

> 更多相关api可参考[vxe-table API props部分](https://vxetable.cn/v3/#/table/api)

## VirtualTable Events

| 方法名        | 说明                 | 参数                                          |   |
| ------------- | --------------------------| --------------------------------------------- | ------------------------------------------------- |
| data-change   | 数据发生变化        | -                                             |
| selection-change   | 单条数据被选中        | selection                                             |
| select-all   | 数据全选       |   selection                                             |
> 更多相关api可参考[vxe-table API Events部分](https://vxetable.cn/v3/#/table/api)


## Columns Item Attributes

| 参数          | 说明                                                                         | 类型     | 可选值                                                                            | 默认值                |
| ------------- | ---------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------- | --------------------- |
| type       | seq:序号  selection:多选                      | string    | selection|seq                                                                                | -                     |
| label       | 显示的标题                      | string    | -                                                                                 | -                     |
| prop       | 对应列内容的字段名                      | string    | -                                                                                 | -                     |
| selectable       | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选                      | Function(row, index)    | -                                                                                 | -                     |
| visible       | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可见                      | Function(row, index)    | -                                                                                 | -                     |
| render       | 自定义render函数                      | Function(h, { column, index })	    | -                                                                                 | -                     |
| fixed       | 将列固定在左侧或者右侧                      | string    | left|right                                                                                 | -                     |
> 更多相关api可参考[vxe-column API](https://vxetable.cn/v3/#/column/api)


## VirtualTable slot
| name | 说明                   |
| -------- | ---------------------- |
| action-left | 多选操作栏左侧插槽 |
| action-right | 多选操作栏右侧插槽 |