Iscroll_table NPM

table

A component which used iScroll-probe for mobile

Usage

奇/偶数行class应用示例

<template>
    <div class="table-demo-container">
        <cTable
            :stripe="false"
            class="c-table"
        ></cTable>
    </div>
</template>
<style lang="scss" scoped>
// 带scoped无法被应用
</style>
<style lang="scss">
.c-table {
  .table-row-odd {
    background: red;
  }
}
</style>

全部示例

<template>
    <div class="table-demo-container">
        <cTable
        ></cTable>
    </div>
</template>
<script>
import cTable from 'table'

export default {
  data() {
    return {
      tableHeader: [
          {
            prop: 'year',
            label: '年度',
            width: "",
            minWidth: '100',
            maxWidth: '',
            align: 'center',
            fixed: true,
          },
          {
            prop: 'age',
            label: '年龄',
            width: "",
            minWidth: '100',
            maxWidth: '',
            align: 'center',
            fixed: true,
          },
          {
            prop: 'dieEnsure',
            label: '身故保障',
            width: "",
            minWidth: '180',
            maxWidth: '',
            align: 'center',
            fixed: '',
          },
          {
            prop: 'totalAnnuity',
            label: '累计年金',
            width: "",
            minWidth: '180',
            maxWidth: '',
            align: 'center',
            fixed: '',
            icon: 'help',
          },
          {
            prop: 'cashValue',
            label: '现金价值',
            width: "",
            minWidth: '180',
            maxWidth: '',
            align: 'center',
            fixed: '',
          },
          {
            prop: 'testX',
            label: '测试横向滚动',
            width: "",
            minWidth: '180',
            maxWidth: '',
            align: 'center',
            fixed: '',
          },
        ], 
    }
  },
  components: {
    cTable
  }
}
</script>

API

Option	type	description
rootSize	Number(default: 40)	根据html fontSize算出rem
showHeader	Boolean(default: true)	是否显示header
headCellStyle	Object(default: { background: '#f2f2f2',color: '#333',fontWeight: 'bold'})	头部样式
fixedHeader	Boolean(default: true)	是否固定头部
stripe	Boolean(default: true)	是否斑马背景 #f8f8f8
stripeColor	String(default: #f8f8f8)	斑马背景色
.table-row-odd	className	!stripe表格主体奇数行class（详解demo）
.table-row-even	className	!stripe表格主体偶数行class（详解demo）
tableHeader	Array( {} )	tableHeader 详解如下，和element方式相同
prop	String	tableHeader 配置属性，后期数据根据这个循环，甚至一些事件名，必须保持唯一
width/minWidth	String/Number	同样式属性，必须合法
align	String(default: center)	对齐样式 center/left/right
fixed	Boolean	是否固定本行
icon	String	表头icon（基于bxs组件），会emit(head.prop)事件
tableBody	Array(default: 0)	tableBody，与element-ui传值相同