maggot-table

属性

| 属性 | 说明 | 类型 | 默认值 |
| ------------------ | ------------------------ | ----------------- | ---------------------- |
| tableSchema | 表格结构 | Object | 必填 |
| tableData | 表格数据 | Array | [] |
| tableChoice | 选中集合 | Array | [] |
| controller | 行操作按钮 | Object | {} |
| rowPower | 按钮状态（根据权限禁用） | String | rowpower |
| total | 表格承载数据总数 | String / Number | 0 |
| resizeTable | 重置表格容器尺寸 | String / Number | Date.now() |
| parentHeight | 表格父容器高度 | Number | 0 |
| isLabel | 行操作按钮是否显示文字 | Boolean | true |
| resetCurrentPage | 重置页码到第一页 | String / Number | Date.now() |
| defaultPageSize | 默认每页条数 | Number | 10 |
| defaultPageSizes | 默认可选每页条数 | Array | [10, 20, 30, 40, 50] |

$3

| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ------------ | -------- | ------ |
| uiSchema | 表格视图结构 | Object | {} |
| columnSchema | 表格表头结构 | Array | [] |

$3

| 属性 | 说明 | 类型 | 默认值 |
| ------------- | ---------------- | ------------------------ | ----------- |
| handleFixed | 操作列定位位置 | left / right | left |
| size | 表格尺寸 | medium / small / mini | medium |
| fit | 列头是否自动撑开 | Boolean | true |
| border | 是否显示边框 | Boolean | true |
| stripe | 是否显示斑马纹 | Boolean | false |
| emptyText | 空数据提示文字 | String | 暂无数据 |
| showHeader | 是否显示表头 | Boolean | true |
| highlight | 当前行是否高亮 | Boolean | true |
| isChoice | 是否显示选择列 | Boolean | false |
| isIndex | 是否显示索引列 | Boolean | false |
| isPage | 是否显示分页器 | Boolean | false |
| sortProp | 默认排序字段 | String | id |
| sortOrder | 默认排序方式 | ascending / descending | ascending |

$3

| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------ | --------------------------- | ------------------------ |
| mold | 表格列应用模板 | String | default |
| prop | 列名标识（字段名字） | String | id |
| width | 列宽 | String / Number / Boolean | |
| minWidth | 列最小宽 | String / Number | |
| fixed | 固定列位置 | left / right | |
| label | 列标题 | String | 标签 |
| align | 列对齐方式 | left / right/ center | left |
| isSort | 是否开启列头排序 | Boolean | false |
| headerAlign | 表头对齐方式 | left / right / center | center |
| isTips | 超出列是否需要tips提示 | Boolean | false |
| formatDate | 列内容格式化 - 日期 | String | 详情 |
| formatNumber | 列内容格式化 - 数字 | String | 详情 |
| formatLink | 列内容格式化 - 链接 | String | 详情 |

$3

| 属性 | 说明 | 类型 | 默认值 |
| -------- | -------------------- | ---------------------------------------------------- | ----------------- |
| mode | 标识（自定义） | String | default |
| type | 按钮主题状态（颜色） | primary / success / warning / danger / info / text | info |
| icon | 按钮图标 | Striing | el-icon-s-tools |
| label | 按钮名称 | String | 操作 |
| useRow | 是否用在表格行中使用 | Boolean | false |
| useAll | 是否用在表格全局使用 | Boolean | false |
| attrs | 携带的额外信息 | Object | {} |

$3

``javascript
// format date rule
// 年 -> y+
// 月 -> M+
// 日 -> d+
// 时 -> h+
// 分 -> m+
// 秒 -> s+
// 季 -> q+
// 毫秒 -> S

// 原始数据：2022年9月22日10:44:22

// 格式化保留年月日，并使用 " - " 连接
// formatDate: "yyyy-MM-dd"
// 2022-09-22

// 格式化保留时分秒, 并使用 " : " 连接
// formatDate: "hh:mm:ss"
// 10:44:22
`

$3

`javascript
// format number rule
// 语法1： [方法名称].[方法参数]
// 语法2： [方法名称]
// 备注：所有方法名称都是 JavaScript 提供的基础方法，目前无法扩展和组合
// 语法1 是 Number 对象提供的方法
// 语法2 是 Math 对象提供的方法

// 原始数据：value = 123.456789

// 格式化保留两位小数
// formNumber: "toFixed.2"
// 123.45

// 格式化向上取整
// formNumber: "ceil"
// 124
`

$3

`javascript
// format link rule
// 语法1：$[跳转外链]?[别名]=[数据中的字段名称 / 固定数值]
// 例子1："bilibili.com?name=projid&key=999ookie=$%#AFAD" 用于跳转到外部链接并携带参数

// 语法2：[内部组件名称]?[别名]=[数据中的字段名称 / 固定数值]
// 例子2："viewinfo?title=projname&hasAge=false"

// 原始数据：
const rawdata = [
{
projid:1002,
projname:"biz",
age:54
}
];

// 语法1结果
// "bilibili.com?name=1002&key=999ookie=$%#AFAD"

// 语法2结果
// "viewinfo?title=biz&hasAge=false"
`

Schema

`json5
// 大小写敏感
{
// 主键字段名称
"keyname":"id",

// 表格UI结构描述, 详细属性在上面表格里
"uiSchema":{},

// 表格列结构描述, 详细属性在上面表格里
"columnSchema":[],

// 表格操作按钮集合, 详细属性在上面表格里
"controller":[]
}
`

TODO

- [x] 文本单元格（default）
- [x] 隐藏单元格
- [x] HTML单元格
- [x] Link单元格
- [x] 输入框单元格
- [x] 下拉框单元格
- [x] 多级下拉框单元格
- [x] 日期选择框单元格
- [ ] 进度条单元格
- [ ] Tag`单元格
- [x] 数字单元格
- [x] 金额单元格
- [ ] 可编辑单元格
- [ ] 搜索框单元格
- [ ] 格式化文本（金额）
- [ ] 格式化文本（浮点数）
- [ ] 格式化文本（用例）
- [ ] 格式化文本（日期、时间）
- [ ] 合计行