https://github.com/notbucai/cding-table
This is an Element-Puls table component that can be configured to perform complex operations on the table.这是一个通过配置的Element-puls表格组件，通过配置可完成表格的复杂操作。
https://github.com/notbucai/cding-table
cding-table data-table el-element el-table element-plus-ui json-table options-table table vue-data-table vue3
Last synced: 7 months ago
JSON representation
This is an Element-Puls table component that can be configured to perform complex operations on the table.这是一个通过配置的Element-puls表格组件，通过配置可完成表格的复杂操作。
- Host: GitHub
- URL: https://github.com/notbucai/cding-table
- Owner: notbucai
- License: mit
- Created: 2021-11-11T11:06:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-30T01:48:27.000Z (over 3 years ago)
- Last Synced: 2024-11-10T06:09:48.785Z (7 months ago)
- Topics: cding-table, data-table, el-element, el-table, element-plus-ui, json-table, options-table, table, vue-data-table, vue3
- Language: JavaScript
- Homepage: https://cding-table.notbucai.com
- Size: 3.21 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cding Table ｜ 表格快速成型工具
Cding Table，一个为开发者准备的基于 Vue 3.0 和 Element Plus 的数据表格组件库。
This is an element-Puls table component that can be configured to perform complex operations on the table.
[cding-table document](https://cding-table.notbucai.com/)
## 🤪 Installation
### Using Package Manager
```bash
# NPM
$ npm install cding-table --save
# Yarn
$ yarn add cding-table
```
### Import in Browser
### UMD
```html
```
## 😵 Usage
### `webpack` or `rollup`
最小使用
```javascript
// import cding-table
import { TableData } from 'cding-table'
// 使用
// 列名
const columns = [
{
prop: 'id',
}, {
prop: 'name',
label: '片名',
}, {
prop: 'release',
label: '发行日期',
},
{
prop: 'director',
label: '导演',
},
{
prop: 'runtime',
label: '时长（分）',
},
];
// 加载函数
async function loadMethod ({ page, sort }) {
return new Promise(r => {
setTimeout(() => {
r(1)
}, 300)
}).then(() => {
return {
total: 100,
list: [
{
id: 1,
name: 'Toy Story',
release: '1995-11-22',
director: 'John Lasseter',
runtime: 80,
},
{
id: 2,
name: "A Bug's Life",
release: '1998-11-25',
director: 'John Lasseter',
runtime: 95,
},
]
}
})
}
```
## 🌚 Options
参数 config 可参考 ElTable 参数 额外参数将标记
```ts
{
size: {
type: String as PropType<'mini' | 'medium' | 'small'>,
default: 'medium',
},
config: {
type: Object as PropType>,
},
initLoad: {
type: Boolean,
default: true,
},
loadMethod: {
required: true,
type: Function as PropType<(event: { page: { pageIndex: number; pageSize: number; }; sort?: { [key: string]: any; }; }) => Promise<{
total: number
list: any[]
}>>,
},
loadTree: {
type: Function as PropType<(row: any, treeNode: TreeNode, resolve: (data: any[]) => void) => void>,
},
columns: {
type: Object as PropType,
},
}
type Config = {
stripe?: boolean
height?: string | number
maxHeight?: string | number
size?: string
width?: string | number
fit?: boolean
border?: boolean
rowKey?: string | ((row: T) => string)
showHeader?: boolean
showSummary?: boolean
sumText?: string
summaryMethod?: SummaryMethod
rowClassName?: ColumnCls
rowStyle?: ColumnStyle
cellClassName?: CellCls
cellStyle?: CellStyle
headerRowClassName?: ColumnCls
headerRowStyle?: ColumnStyle
headerCellClassName?: CellCls
headerCellStyle?: CellStyle
highlightCurrentRow?: boolean
currentRowKey?: string | number
emptyText?: string
expandRowKeys?: any[]
defaultExpandAll?: boolean
defaultSort?: Sort
tooltipEffect?: string
spanMethod?: (data: {
row: T
rowIndex: number
column: TableColumnCtx
columnIndex: number
}) =>
| number[]
| {
rowspan: number
colspan: number
}
selectOnIndeterminate?: boolean
indent?: number
treeProps?: {
hasChildren?: string
children?: string
}
lazy?: boolean
load?: (row: T, treeNode: TreeNode, resolve: (data: T[]) => void) => void
className?: string
style?: CSSProperties
}
```
## Todos
+ [x] 静态数据渲染
+ [x] 动态加载数据
+ [x] 数据分页
+ [ ] 测试覆盖率
+ [ ] 长数据优化
+ [ ] other...