ElementUI表格组件分页记忆

通过扩展el-table组件实现分页记忆功能。

示例

组件说明

@selection-history-change 事件, 当选择项发生变化时会触发该事件,参数为所有选中项目。

:unique-key 属性,标识每条数据的唯一字段,默认为’id’。

getHistorySelection() 方法,获取所有选中项目。

clearHistorySelection() 方法,清空所有选中项目。

使用

const customTable = {
    name: 'customTable',
    extends: ELEMENT.Table,
    data() {
        return {
            $$selectedRecord: [],
            $$flag: false
        }
    },
    watch: {
        data(nv) {
            this.$$flag = true
            if (nv && nv.length) {
                this.$nextTick(() => {
                    this.afterUpdateData()
                })
            }
        },
    },
    props:{
        uniqueKey:{
            type:'String',
            default:'id'
        }
    },
    created() {
        this.$$selectedRecord = []
        this.$$flag = []
        this.$on('selection-change', this.handleSelectionChange.bind(this))
    },
    methods: {
        getHistorySelection() {
            return this.$$selectedRecord
        },
        clearHistorySelection() {
            this.clearSelection()
            this.$$selectedRecord = []
        },
        afterUpdateData() {
            let id = this.uniqueKey
            this.data.forEach((i, idx) => {
                if (this.$$selectedRecord.includes(i[id])) {
                    this.toggleRowSelection(this.data[idx], true);
                }
            })
            this.$$flag = false
        },

        handleSelectionChange(selection) {
            let id = this.uniqueKey
            this.$nextTick(() => {
                let currentSelected = selection.map(i => i[id])

                currentSelected.forEach(i => {
                    if (!this.$$selectedRecord.includes(i)) {
                        this.$$selectedRecord.push(i)
                    }
                })

                if (this.$$flag == false) {
                    this.data.filter(i => !currentSelected.includes(i[id])).forEach(i => {
                        let idx = this.$$selectedRecord.indexOf(i[id])
                        if (idx >= 0) {
                            this.$$selectedRecord.splice(idx, 1)
                        }
                    })
                }

                this.$emit('selection-history-change', this.$$selectedRecord.slice())
            })

        }
    }
}
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注