T table

vue table component for mobile

Version: 1.1.7 Updated: 05/28/2019

By: Toreant License: MIT

Downloads Last 30 Days: 147

Install

npm i t-table
yarn add t-table

Repository: https://github.com/Toreant/vue-table

CDNs

bundle.run: https://bundle.run/t-table

jsDelivr: https://cdn.jsdelivr.net/npm/t-table

unpkg: https://unpkg.com/t-table

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
Categories: Vue js