Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Toreant/t-table

Open more actions menu

Repository files navigation

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

About

mini mobile table component for vue

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  
Morty Proxy This is a proxified and sanitized view of the page, visit original site.