1.快速开始
安装依赖
npm install tabulator-tables --save
构建实例
<template>
<div id="example-table"></div>
</template>
<script>
import {
TabulatorFull as Tabulator } from 'tabulator-tables'
export default {
name: 'Tabulator',
components: {
},
props: {
},
data() {
return {
}
},
computed: {
},
watch: {
},
created() {
var tabledata = [
{
id: 1, name: 'Oli Bob', age: '12', col: 'red', dob: '' }
]
var table = new Tabulator('#example-table', {
height: 205,
data: tabledata,
layout: 'fitColumns',
columns: [
{
title: 'Name', field: 'name', width: 150 },
]
})
table.on('rowClick', function (e, row) {
alert('Row ' + row.getData().id + ' Clicked!!!!')
})
},
mounted() {
},
beforeDestroy() {
}
}
</script>
<style lang="scss" scoped>
@import '~/tabulator-tables/dist/css/tabulator.min.css';
</style>
2. body单元格换行设置
组件默认会使用
ellipsis
行为
如果设置columns
的formatter
为textarea
时,单元格内容会自动换行;
示例如下:
const columns = [{title: "Name", field: "name", formatter: "textarea"}]
但是如果我们设置了formatter
为自定义函数,需要实现单元格换行,官方建议我们设置columns
的variableHeight:true
,但是效果是出不来的;所以我们需要在formatter
中加入cell.getElement().style.whiteSpace = 'pre-wrap'
,示例如下:
const columns = [
{
title: "Name",
field: "name",
formatter: function (cell, formatterParams) {
const value = cell.getValue()
cell.getElement().style.whiteSpace = 'pre-wrap' // 换行
return value
},
variableHeight: true // 设置这里其实是无效的
}
]
3. header单元格换行设置
组件默认会使用
ellipsis
行为
组件默认是不提供header单元格换行的,所以我们需要手动加入css样式来实现换行,代码如下:
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
white-space: normal;
text-overflow: clip;
}
如果想动态实现是否启用header单元格换行设置,我们可以使用动态className的方式来实现,代码如下:
<template>
<div :class="['table-complex', { 'header-alter--row': true }]"></div>
</template>
.header-alter--row .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title
{
white-space: normal;
text-overflow: clip;
}
4. 排序设置
组件默认点击排序后,只有两种状态,升序和降序
,不能回到默认排序;如果需要支持回到默认排序,需要设置headerSortTristate: true
,示例如下:
new Tabulator('#example-table', {
height: 205,
data: [{
id: 1, name: 'Oli Bob', age: '12', col: 'red', dob: '' }],
layout: 'fitColumns',
columns: [
{
title: 'Name', field: 'name', width: 150, headerSortTristate: true } // 支持三种状态的排序
]
})
默认排序规则如下:
new Tabulator('#example-table', {
height: 205,
data: [{
id: 1, name: 'Oli Bob', age: '12', col: 'red', dob: '' }],
layout: 'fitColumns',
columns: [
{
title: 'Name',
field: 'name',
width: 150,
// 默认排序规则
sorter: function(a, b){
return String(a).toLowerCase().localeCompare(String(b).toLowerCase())
}
}
]
})
5. layout完美兼容方案
如果想组件有个比较完美的显示方式,我们需要动态切换layout: 'fitData'
和layout: 'fitColumns'
。
一开始使用layout: 'fitData'
去尝试渲染组件,看数据是否能够铺满表格,如果能铺满,证明这个时候出来的效果是ok的;如果不能铺满表格,也就是.tabulator-tableholder
的宽度小于.tabulator-table
的宽度,这个时候启用layout: 'fitColumns'
即可;