安装依赖

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 |