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'即可；