BaseList 基础列表类

使用方法

首先引入BaseList类，并且实例化

import { BaseList } from '@liz-q/utils'

// 不传参
const baseList = new BaseList()
// 传参
const baseList = new BaseList({
    rowKey: 'id', // 默认是id
    pagination: {
        pageSize: 10,
        pageNum: 1,
        total: 0
    }
})

假如有列表数据如下，使用实例方法initData初始化数据

const list = [
    {
        id: 1,
        fileName: 'eewewew',
        updateTime: '12121212',
        regenerator: '张三'
    },
    {
        id: 2,
        fileName: 'fdfddgfdg',
        updateTime: '12121212',
        regenerator: '张三'
    }
]

baseList.initData(list)

在 el-table 中这样使用：

<el-table :data="baseList.list"></el-table>

在 el-pagination 中这样使用：

<ele-pagination v-bind="baseList.pagination" @change="handlePaginationChange"></ele-pagination>

handlePaginationChange (val) {
	this.baseList.setPagination(val)
}

BaseRow 使用

BaseRow 是列表项的类，如果在某一行中你想操作其他行或列表数据，亦或在编辑状态下取消编辑恢复数据时你可能会用到此类。

import { BaseRow } from '@liz-q/utils'

在调用 baseList.initData 之前你需要遍历列表实例化每一项

const rowObjs = list.map(item => new BaseRow(item, {
    rowKey: 'id', // 默认是id
    listInstance: baseList // 列表实例
}))

baseList.initData(rowObjs)

API

BaseList 实例属性

名称	描述	默认值
rowKey	列表项目唯一key	id
pagination	分页数据	{pageSize: 15}
loading	列表加载状态	false
list	列表数据	[]
pageSize	是一个 getter 获取每页条数
pageNum	是一个 getter 获取当前页数
pageNum	是一个 setter 设置当前页数

BaseList 实例方法

名称	描述	参数
setLoading	设置列表加载状态，如果不传val，loading值交替变更	function(val: undefined | boolean) {}
setPagination	设置分页信息，如果pageNum或pageSize发生变化则会清空list。	function(pagination)
initData	初始化list数据和分页数据	function(list, pagination)
getRow	获取行对象	function(id)
getRowIndex	获取行索引	function(id)
addOne	结尾增加一行	function(obj)
addOnePrev	开头增加一行	function(obj)
deleteRow	删除一行	function(id)
formatSpanInfo	添加合并单元格信息，有些表格会根据某列相同的值合并。组件中添加spanMethod方法，参考el-table	function({key: 'type'})

BaseRow 实例属性

名称	描述	默认值
rowKey	列表项目唯一key	id
listInstance	列表实例
_loading	行内置加载状态	false
_isEdit	行内置编辑状态	false
[key: string]: any	复制了行数据所有的字段

BaseRow 实例方法

名称	描述	参数
getOptions	获取行原始数据	-
recoverData	恢复行数据	-