vue-h5-table

直接在项目中使用

下载包

npm i vue-h5-table

main.js引入

import VueH5Table from 'vue-h5-table';
import 'vue-h5-table/lib/vue-h5-table.css';

Vue.use(VueH5Table)

在vue中使用

<my-table
  :data="list"
>
  <my-table-column label="排名" >
    <template slot-scope="scope">
      {{ scope.$index + 1 }}
    </template>
  </my-table-column>
  <my-table-column label="说明" prop="mark">
  </my-table-column>
</my-table>

参数

Table参数

| 参数 | 类型 | 说明 | 是否必填 | | ---- | ---- | ---- | ---- | | data | Array | 表格数据 | 必填 | | headerRowClass | Function({column, columnIndex, rowIndex})/String | 表头行的className的回调方法，也可以使用字符串为所有表头行设置一个固定的className | 非必填 | | cellStyle | Function({rowIndex, columnIndex, row, column})/Object | 单元格的style的回调方法，也可以使用一个固定的Oject为所有表头行设置一样的Style | 非必填 | | cellClass | Function({rowIndex, columnIndex, row, column})/String | 单元格的className的回调方法，也可以使用字符串为所有单元格设置一个固定的className | 非必填 | | rowStyle | Function({row, rowIndex})/Object | 行的style的回调方法，也可以使用一个固定的Object为所有行设置一样的Style | 非必填 | | rowClass | Function({row, rowIndex})/String | 行的className的回调方法，也可以使用字符串为所有行设置一个固定的className | 非必填 | | height | Number | Table的最大高度，如果超过了这个高度会出现滚动条并固定表头 | 非必填 | | spanMethod | Function({row, column, rowIndex, columnIndex}) | 合并行或列的计算方法 | 非必填 | | stripe | Boolean | 是否为斑马纹table | 非必填 | | cellClick | Function({rowIndex, columnIndex, row, column}) | 行的点击事件 | 非必填 | | footerCellStyle | Object | 表尾合计行单元格的style | 非必填 | | showFooter | Boolean | 是否显示表尾合计行 | 非必填 | | footerSpan | Function({row, column, rowIndex, columnIndex}) | 表尾合计的合并行或列的计算方法 | 非必填 | | footerData | Array | 表尾数据 | 非必填 | | footerEqual | Boolean | 表尾数据是否采用插槽 | 非必填 | | fixVer | Boolean | 是否水平固定（左右不滚动） | 非必填 |

Table-column参数

| 参数 | 类型 | 说明 | 是否必填 | | ---- | ---- | ---- | ---- | | fixed | Boolean | 是否固定列 | 非必填 | | label | String | 显示的标题 | 非必填 | | minWidth | String/Number | 列的最小宽度 | 非必填 | | prop | String | 对应列内容的字段名 | 非必填 | | align | String | 对齐方式 | 非必填 | | className | String | 列的className | 非必填 |