bz-table 表格

基本用法

表格是由 4 个组件： bz-table表格组件、bz-tr表格行 、bz-th  表格头、bz-td  单元格组成

需要注意的是：

• bz-table  的根节点一定是  bz-tr
• bz-tr  的根节点一定是  bz-th  或者  bz-td
• 一个表格内理论上只能包含表头行
• 目前只能在  bz-th  中设置 width 属性，bz-td  的宽度跟随  bz-th  宽度变化

扫码预览

用BoosHi扫码或PC端点击

<template>
  <bz-table class="app-table board-table" emptyText="暂无数据">
    <!-- 表头行 -->
    <bz-tr>
      <bz-th width="86">流程名单</bz-th>
      <bz-th sortable width="127" align="center">平均审时(h)</bz-th>
      <bz-th sortable width="127" align="center">审批率</bz-th>
    </bz-tr>
    <!-- 表格数据行 -->
    <bz-tr>
      <bz-td>印章/证照</bz-td>
      <bz-td align="center">20.87</bz-td>
      <bz-td align="center">20.87</bz-td>
    </bz-tr>
    <bz-tr>
      <bz-td>物领取-北</bz-td>
      <bz-td align="center">20.87</bz-td>
      <bz-td align="center">20.87</bz-td>
    </bz-tr>
    <bz-tr>
      <bz-td>[物业]-印</bz-td>
      <bz-td align="center">20.87</bz-td>
      <bz-td align="center">20.87</bz-td>
    </bz-tr>
  </bz-table>
</template>

展开 刷新 关闭

API

Table Props

属性名	类型	默认值	可选值	说明
border	Boolean	false	-	是否带有纵向边框
stripe	Boolean	false	-	是否显示斑马线样式
type	String	''	-	值为 type="selection" 时开启选择
emptyText	String	没有更多数据	-	空数据时显示的文本内容
loading	Boolean	false	-	显示加载中
fixedHeader 1.0.1	Boolean	false	-	固定头部
fixedLeft 1.0.1	Boolean	false	-	固定首列
fixedRight 1.0.1	Boolean	false	-	固定最后一列

tip: 加上固定行列属性时，表格的包裹元素会有不同，注意样式问题

Table Events

事件称名	说明	返回参数
selection-change	开启选择时，当选择项发生变化时会触发该事件	Function(Object)
scroll-bottom	滚动到底部或右侧时会触发该事件	Function(direction)

Table Methods

方法称名	说明	参数
selectionAll	选中全部行	-
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	Function(Array:[行索引],Boolean:selected)
clearSelection	用于多选表格，清空用户的选择	-
toggleAllSelection	用于多选表格，切换所有行的选中状态	-

Th Props

属性名	类型	默认值	可选值	说明
width	String	-	-	单元格宽度
align	String	left	left/center/right	表头对齐方式
sortType（v-model）	-1/0/1	0	-1/0/1	排序方式 下降/默认/上升
filter-type	String		search/select/range/date	筛选类型，search 关键字搜索，select 类别选择
filter-data	Array			筛选数据
sortable	Boolean	false	-	是否启用排序

filter-data 示例

[
  {
    text: "", //显示
    value: "", // 值
  },
];

Th Events

事件称名	说明	返回参数
sort-change	点击排序时会触发该事件	Function(Object)
change	筛选数据时会触发该事件，直接回调类型	Function(sortType)
filter-change	筛选数据时会触发该事件	Function(Object)

filter-change(e) 说明

e = {
  filterType: "", //筛选类型 search/select/range 和传入的相同
  filter: "", // 值, filterType=search字符串类型，filterType=select数组类型，filterType=range数组类型，[0]开始值， [1]结束值
};

Td Props

属性名	类型	默认值	可选值	说明
align	String	left	left/center/right	单元格对齐方式

示例代码

<template>
  <view>
    <view class="bz-container">
      <bz-table
        :loading="loading"
        border
        stripe
        type="selection"
        emptyText="暂无更多数据"
        @selection-change="selectionChange"
      >
        <bz-tr>
          <bz-th width="150" align="center">日期</bz-th>
          <bz-th width="150" align="center">姓名</bz-th>
          <bz-th align="center">地址</bz-th>
          <bz-th width="204" align="center">设置</bz-th>
        </bz-tr>
        <bz-tr v-for="(item, index) in tableData" :key="index">
          <bz-td>{{ item.date }}</bz-td>
          <bz-td>
            <view class="name">{{ item.name }}</view>
          </bz-td>
          <bz-td align="center">{{ item.address }}</bz-td>
          <bz-td>
            <view class="bz-group">
              <button class="bz-button" size="mini" type="primary">修改</button>
              <button class="bz-button" size="mini" type="warn">删除</button>
            </view>
          </bz-td>
        </bz-tr>
      </bz-table>
    </view>
  </view>
</template>