Toreant / t-table

mini mobile table component for vue

table组件

移动端table组件，支持左右固定列、排序

用法

npm install t-table --save

import TTable from "t-table"
Vue.use(TTable)

// or 通过<script src="./table.js"></script>

<t-table :data="data" height="300px" width="500px" header-height="30">
    <t-table-column fixed width="120" prop="title" label="标题" sortable></t-table-column>
    <t-table-column fixed width="120" label="#">
        <template slot-scope="scope">
            {{ scope.row.name }}: {{ scope.index }}
        </template>
    </t-table-column>
</t-table>

table props:

属性名	类型	默认值	描述
data	Array	[]	Table数据
height	String	无	table容器的高度，单位为px, height和maxHeight必须填写一个
max-height	String	无	table容器的最大高度，单位为px
width	String	无	table容器的宽度，必填，单位为px
can-move	Boolean	false	是否阻止默认的滑动事件
header-height	Number	30	header的高度，默认为30px
row-active-index	Number	8	active行的个数，从第一行顺序开始

table slot

name	说明
empty	当data为空时，显示empty内容

table events

name	说明
move	每次滑动停止后触发的事件
update	组件updated时，触发的函数

table-column props

prop名	类型	默认值	描述
fixed	[Boolean|String]	无	设置此列固定，可选值【left|rgiht】，不填具体指的话，fixed为left
width	Number	无	设置列的宽度
sortable	[Boolean|String]	无	是否可筛选，可选值为【asc|desc】，不填具体指的话，sortable为asc
prop	String	无	对应列内容的字段名
label	String	无	对应列的辩题
text-align	String	无	对齐的方式，默认为center

table-column slot

name	说明
header	覆盖label标签，自定义col header