tabulator-tables使用总结（避坑大法）

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