1.0.10 • Published 3 years ago
bo-table v1.0.10
安装依赖
npm i bo-table使用
- 引用
import bTable from 'bTable'
Vue.use(bTable)- 创建表格
<!-- 如果需要自定义筛选列的功能，需要在组件上添加
:showHandle="true"
@handle-column="((arr)=>{defaultHead = arr}) -->
<b-table :data="listData" :columns="defaultHead" :showsummary="true"></b-table>
<script>
data(){
return {
// 列表数据
listData: [],
// 表头数据
defaultHead: []
}
}
</script>| 参数 | 类型 | 描述 | 是否必填 | 默认值 |
|---|---|---|---|---|
| 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 |