安装依赖
``
npm i bo-table
`
使用
- 引用
`
javascript
import bTable from 'bTable'
Vue.use(bTable)
`
- 创建表格
`
``
| 参数 | 类型 | 描述 | 是否必填 | 默认值 |
| ---- | ---- | ---- | ---- | ---- |
| data | Array | 表格要显示的数据 | ✗ | -- |
| columns | Array | 展示列配置信息，如：[
{
type: "index",
minWidth: 80
},
{
prop: "name",
label: "姓名",
align: "center",
minWidth: "120",
fixed: "left",
sort: true,
// 可选值价格(price)、数量(num)
hj: "price",
// 多级表头需要设置child,内容与普通column相同
child: [],
}
] | ✗ | -- |
| options | Object | 表格配置信息 | ✗ | {
stripe: true,
border: true,
lazy: false,
max_height: "",
highlightCurrentRow: false,
headerRowStyle: {
backgroundColor: "#f8f8f8"
}
} |
| tableClass | String | table自定义类名 | ✗ | 'hxTable' |
| showPage | Boolean | 是否展示分页 | ✗ | true |
| page | Object | 分页数据；showPage=false时可默认不传 | ✓ | {
total: 0,
page: 1,
perpage: 20
} |
| loading | Boolean | 表格区域的加载效果 | ✗ | false |
| defaultSort | Object | 表格的默认排序 | ✗ | -- |
| sortMethod | Function(a, b) | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | ✗ | -- |
| showsummary | Boolean | 是否显示表格合计行 | ✗ | false |
| precision | Number | 合计行,价格精度-保留几位小数 | ✗ | 2 |
| count_sum | Object | 手动传入合计数据，键名需与表格列prop相同 | ✗ | -- |
| showHandle | Boolean | 是否显示表格上方显示区域, 默认有自定义筛选列功能 | ✗ | false |