VueCheetahGrid 使用

CGrid.md

CGrid.vue

/**
 * 项目中的基础表格,这里包括了二层表头,和合并单元格的表格
 * 合并单元格并不是真的合并,而是通过theme定制的方式来做的
 */

<template>
  <c-grid ref="cgrid"
          v-if="$_headers.length && refleshFlag"
          :data="$_tableData"
          class="material border"
          :frozen-col-count="fixCols.length"
          :theme="userTheme">
    <template v-for="(header,index) in $_headers">
      <c-grid-column v-if="!header.children"
                     :key="header.label"
                     :caption="` ${header.label} `"
                     :field="(CGGRID_FORMATTER[header.type]|| (a => a))(header.name)"
                     :width="header.width"
                     header-type="sort"
                     header-action="sort"
                     @changed-header-value="onChangeHeaderValue"
                     :header-style="{textAlign: ALIGN[header.type] ||'left',bgColor: '#f5f5f5',font: 'bold 12px Roboto',color: '#000000'}"
                     :column-style="columnStyle(header.type)"
                     :min-width="header.minWidth || 100">
      </c-grid-column>
      <c-grid-column-group v-else
                           :key="header.label"
                           :caption="header.label"
                           :header-style="{textAlign: 'center',bgColor: '#f5f5f5',font: 'bold 12px Roboto',color: '#000000'}">
        <c-grid-column v-for="subheader in header.children"
                       :key="subheader.label"
                       :caption="` ${subheader.label} `"
                       :field="(CGGRID_FORMATTER[header.type]|| (a => a))(header.name,subheader.name,FORMATTER_STR[subheader.type])"
                       :width="subheader.width"
                       header-type="sort"
                       header-action="sort"
                       @changed-header-value="onChangeHeaderValue"
                       :header-style="{textAlign: ALIGN[subheader.type] ||'left',bgColor: '#f5f5f5',font: 'bold 12px Roboto',color: '#000000'}"
                       :column-style="columnStyle(header.type)"
                       :min-width="subheader.minWidth || 100"></c-grid-column>
      </c-grid-column-group>
    </template>
  </c-grid>
</template>
<script>
import { CGGRID_FORMATTER, ALIGN, FORMATTER_STR } from '@/utils/tableFormatter';
import * as cGridAll from 'vue-cheetah-grid';
import { sum, flatten, orderBy, cloneDeep } from 'lodash';

export default {
  name: 'CGrid',
  components: { ...cGridAll },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    // 表头
    headers: {
      type: Array,
      default() {
        return [];
      },
    },
    // 固定列,这里只取数组长度,为了与 el-table 保持兼容
    fixCols: {
      type: Array,
      default() {
        return [];
      },
    },
    // 各行高亮, 暂时没有实现,为了与 el-table 保持兼容
    stripe: {
      type: Boolean,
      default: true,
    },
    // 高亮行 [[列name,目标值]] 当 rec.列name === 目标值 的时候,行高亮,与customColumnStyle互斥
    hightLightRows: {
      type: Array,
      default() {
        return [];
      },
    },
    // 高亮 tr , 接受参数 rec为当前行的数据,放回style对象,放回对象参考:
    // https://future-architect.github.io/cheetah-grid/0.11/demos/usage/column_styles.html
    customColumnStyle: {
      type: Function,
      default: null,
    },
  },
  data() {
    this.CGGRID_FORMATTER = CGGRID_FORMATTER;
    this.ALIGN = ALIGN;
    this.FORMATTER_STR = FORMATTER_STR;
    return {
      refleshFlag: true, // 强制刷新标志,false => true 用来强制表格重新渲染
      // 组件内部排序,当没有合并单元格的时候,可以在组件内部排序
      sort: {
        sortBy: '',
        order: '',
      },
      userTheme: {
        font: '12px Roboto',
        borderColor: args => {
          // 合并单元格的Theme设置
          const {
            col,
            row,
            grid: { frozenRowCount },
          } = args;
          const currentHeader = this.$_flattenHeaders[col];
          if (currentHeader && currentHeader.type === 'spanRows' && row >= frozenRowCount) {
            const __row = row - frozenRowCount;
            const currentCellData = this.$_tableData[__row][currentHeader.name];
            if (__row === currentCellData.rowSpanStart && currentCellData.rowSpan === 1) {
              return ['#ebeef5'];
            }
            if (__row === currentCellData.rowSpanStart) {
              return ['#ebeef5', '#ebeef5', null, '#ebeef5'];
            }
            if (__row === currentCellData.rowSpanStart + currentCellData.rowSpan - 1) {
              return [null, '#ebeef5', '#ebeef5', '#ebeef5'];
            }
            return [null, '#ebeef5'];
          }
          return ['#ebeef5'];
        },
      },
    };
  },
  computed: {
    // 展开的表头
    $_flattenHeaders() {
      return flatten(
        this.headers.map(item => {
          if (item.children) {
            return item.children.map(jtem => {
              jtem.$_parent = item;
              return jtem;
            });
          }
          return [item];
        }),
      );
    },
    // 表头取值函数,用来做排序
    $_headerIteratees() {
      return this.$_flattenHeaders.map(header => {
        if (header.type === 'spanRows' || header.type === 'objectValue') {
          return item => {
            const value = item[header.name].value;
            return +value || value;
          };
        }
        if (header.$_parent) {
          return item => {
            const value = item[header.$_parent.name][header.name];
            return +value || value;
          };
        }
        return item => {
          const value = item[header.name];
          return +value || value;
        };
      });
    },
    // 总宽度,用于计算表头宽度
    $_totalWidth() {
      return sum(this.$_flattenHeaders.map(item => item.minWidth || 100));
    },
    // 计算表头,计算表头宽度,并设置符合列的单元格类型
    $_headers() {
      // 计算列的百分比宽度
      let widthLeft = 100; // 这里这样计算是为了修复小数点偏差,让最后一个单元格将剩下的宽度占满
      this.$_flattenHeaders.map((item, index) => {
        let __width = (Math.floor(((item.minWidth || 100) / this.$_totalWidth) * 1000) / 10).toFixed(1);
        __width = __width < 1 ? 1 : __width;
        if (index !== this.$_flattenHeaders.length - 1) {
          widthLeft -= __width;
          item.width = `${__width}%`;
        } else {
          widthLeft = (Math.floor(widthLeft * 3) / 3).toFixed(1);
          widthLeft = widthLeft < 1 ? 1 : widthLeft;
          item.width = `${widthLeft}%`;
        }
        return item;
      });
      // 设置复合列(二层表头)的单元格类型
      return this.headers.map(item => {
        if (item.children) {
          item.type = 'subObjectProp';
        }
        return item;
      });
    },
    // 计算表格数据,添加列索引,用来计算合并单元格.如果可以组件内排序,则添加排序逻辑
    $_tableData() {
      let __tableData = cloneDeep(this.tableData);
      if (this.canSortInside && this.sort.order) {
        __tableData = orderBy(__tableData, [this.sort.sortBy], [this.sort.order]);
      }
      return __tableData.map((item, index) => {
        item.$_index = index;
        return item;
      });
    },
    /**
     * 是否可以在组件内排序(没有合并单元格就可以在内部排序)
     */
    canSortInside() {
      return !this.$_flattenHeaders.find(header => header.type === 'spanRows');
    },
  },
  methods: {
    updateSize() {
      // 强制重新渲染表格
      this.refleshFlag = false;
      this.$nextTick().then(() => {
        this.refleshFlag = true;
      });
    },
    // 高亮行
    columnStyle(headerType) {
      if (this.hightLightRows.length) {
        return rec => ({
          textAlign: this.ALIGN[headerType] || 'left',
          padding: [0, 5],
          bgColor: this.hightLightRows.some(pair => rec[pair[0]] === pair[1]) ? '#f5f5f5' : '',
        });
      }
      if (this.customColumnStyle) {
        return rec => ({
          textAlign: this.ALIGN[headerType] || 'left',
          padding: [0, 5],
          ...this.customColumnStyle(rec),
        });
      }
      return rec => ({
        textAlign: this.ALIGN[headerType] || 'left',
        padding: [0, 5],
      });
    },
    cancelSort() {
      if (this.canSortInside) {
        this.sort = {};
      } else {
        this.$emit('update:outersort', { sortBy: '', iteratee: '', order: '' });
      }
      // future-architect/cheetah-grid #145 issue
      this.$refs.cgrid.rawGrid.sortState = null;
    },
    // 表头排序
    onChangeHeaderValue({ col, field, oldValue, row, value }) {
      // console.log(col, field, oldValue, row, value);
      // 内部排序,直接改变 sort 属性,这样会重新计算 $_tableData
      if (oldValue === 'desc' && value === 'asc') {
        this.cancelSort();
        return;
      }
      if (this.canSortInside) {
        this.sort.sortBy = this.$_headerIteratees[col];
        this.sort.order = value;
      } else {
        // 无法内部排序,则发送事件,异步更新外部排序条件,让调用者将排序好的tableData重新下发
        this.$emit('update:outersort', {
          sortBy: this.$_flattenHeaders[col],
          iteratee: this.$_headerIteratees[col],
          order: value,
        });
      }
    },
  },
  watch: {
    // 当表头变化的时候,强制重新渲染表格
    $_headers() {
      this.updateSize();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

data.js

export default data = [
  {
    "date": "2019-04-03",
    "rows": [
      {
        "us": { "cost": null, "conversions": null },
        "": { "cost": 107.799348, "conversions": 1322, "cpi": 0.08154262329803327 },
        "ca": { "cost": null, "conversions": null },
        "code": "A280"
      },
      {
        "us": { "cost": 58.865492, "conversions": 57, "cpi": 1.0327279298245615 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": 1.977909, "conversions": 1, "cpi": 1.977909 },
        "code": "A376"
      },
      {
        "us": { "cost": 30.25, "conversions": 30, "cpi": 1.0083333333333333 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A413"
      },
      {
        "us": { "cost": 21.932796, "conversions": 18, "cpi": 1.2184886666666666 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A351"
      },
      {
        "us": { "cost": 5.61, "conversions": 8, "cpi": 0.70125 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A435"
      },
      {
        "us": { "cost": 2.607213, "conversions": 1, "cpi": 2.607213 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A395"
      }
    ]
  },
  {
    "date": "2019-04-02",
    "rows": [
      {
        "us": { "cost": 3056.050713, "conversions": 3989, "cpi": 0.7661195068939584 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": 179.182945, "conversions": 184, "cpi": 0.9738203532608695 },
        "code": "A376"
      },
      {
        "us": { "cost": null, "conversions": null },
        "": { "cost": 2106.524673, "conversions": 32699, "cpi": 0.06442168485274778 },
        "ca": { "cost": null, "conversions": null },
        "code": "A280"
      },
      {
        "us": { "cost": 1407.356068, "conversions": 1501, "cpi": 0.9376123037974684 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A351"
      },
      {
        "us": { "cost": 621.76528, "conversions": 593, "cpi": 1.048508060708263 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A413"
      },
      {
        "us": { "cost": 287.807596, "conversions": 307, "cpi": 0.9374840260586319 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A435"
      },
      {
        "us": { "cost": 104.306748, "conversions": 72, "cpi": 1.4487048333333332 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A395"
      }
    ]
  },
  {
    "date": "2019-04-01",
    "rows": [
      {
        "us": { "cost": 2911.489043, "conversions": 4174, "cpi": 0.6975297180162914 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": 171.361654, "conversions": 219, "cpi": 0.782473305936073 },
        "code": "A376"
      },
      {
        "us": { "cost": null, "conversions": null },
        "": { "cost": 2130.490437, "conversions": 29828, "cpi": 0.07142585614188011 },
        "ca": { "cost": null, "conversions": null },
        "code": "A280"
      },
      {
        "us": { "cost": 1172.2017879999999, "conversions": 1320, "cpi": 0.8880316575757574 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A351"
      },
      {
        "us": { "cost": 653.005546, "conversions": 664, "cpi": 0.9834420873493975 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A413"
      },
      {
        "us": { "cost": 369.001904, "conversions": 324, "cpi": 1.1388947654320989 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A350"
      },
      {
        "us": { "cost": 138.000327, "conversions": 140, "cpi": 0.9857166214285714 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A435"
      },
      {
        "us": { "cost": 105.194057, "conversions": 94, "cpi": 1.1190857127659575 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A395"
      },
      {
        "us": { "cost": 24.442223, "conversions": 12, "cpi": 2.0368519166666665 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A410"
      }
    ]
  },
  {
    "date": "2019-03-31",
    "rows": [
      {
        "us": { "cost": 3119.8193619999997, "conversions": 3859, "cpi": 0.8084528017621144 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": 118.328392, "conversions": 139, "cpi": 0.8512833956834532 },
        "code": "A376"
      },
      {
        "us": { "cost": null, "conversions": null },
        "": { "cost": 1970.507119, "conversions": 28704, "cpi": 0.0686492167990524 },
        "ca": { "cost": null, "conversions": null },
        "code": "A280"
      },
      {
        "us": { "cost": 1185.4729379999999, "conversions": 1373, "cpi": 0.8634180174799708 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A351"
      },
      {
        "us": { "cost": 792.226206, "conversions": 804, "cpi": 0.9853559776119404 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A413"
      },
      {
        "us": { "cost": 499.2577, "conversions": 463, "cpi": 1.0783103671706264 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A410"
      },
      {
        "us": { "cost": 250.168542, "conversions": 238, "cpi": 1.0511283277310925 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A350"
      },
      {
        "us": { "cost": 159.999584, "conversions": 134, "cpi": 1.1940267462686567 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A395"
      },
      {
        "us": { "cost": 155.22762699999998, "conversions": 98, "cpi": 1.5839553775510202 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A435"
      }
    ]
  },
  {
    "date": "2019-03-30",
    "rows": [
      {
        "us": { "cost": 2750.022224, "conversions": 3983, "cpi": 0.6904399256841576 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": 126.6571, "conversions": 146, "cpi": 0.8675143835616438 },
        "code": "A376"
      },
      {
        "us": { "cost": null, "conversions": null },
        "": { "cost": 1971.351221, "conversions": 27723, "cpi": 0.07110887064891967 },
        "ca": { "cost": null, "conversions": null },
        "code": "A280"
      },
      {
        "us": { "cost": 1213.776519, "conversions": 1318, "cpi": 0.9209230037936267 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A351"
      },
      {
        "us": { "cost": 865.5475729999999, "conversions": 779, "cpi": 1.1111008639281128 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A413"
      },
      {
        "us": { "cost": 601.90739, "conversions": 635, "cpi": 0.947885653543307 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A410"
      },
      {
        "us": { "cost": 286.22256500000003, "conversions": 255, "cpi": 1.122441431372549 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A395"
      },
      {
        "us": { "cost": 152.4094, "conversions": 125, "cpi": 1.2192752 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A435"
      },
      {
        "us": { "cost": 66.660841, "conversions": 61, "cpi": 1.0928006721311476 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A350"
      }
    ]
  },
  {
    "date": "2019-03-29",
    "rows": [
      {
        "us": { "cost": 2047.171226, "conversions": 2622, "cpi": 0.7807670579710144 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": 74.879735, "conversions": 123, "cpi": 0.6087783333333333 },
        "code": "A376"
      },
      {
        "us": { "cost": null, "conversions": null },
        "": { "cost": 2062.246204, "conversions": 28585, "cpi": 0.07214434857442714 },
        "ca": { "cost": null, "conversions": null },
        "code": "A280"
      },
      {
        "us": { "cost": 1314.290058, "conversions": 1467, "cpi": 0.8959032433537832 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A351"
      },
      {
        "us": { "cost": 917.03674, "conversions": 870, "cpi": 1.0540652183908046 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A413"
      },
      {
        "us": { "cost": 559.395497, "conversions": 515, "cpi": 1.0862048485436893 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A410"
      },
      {
        "us": { "cost": 253.54070000000002, "conversions": 139, "cpi": 1.8240338129496403 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A435"
      },
      {
        "us": { "cost": 214.766078, "conversions": 180, "cpi": 1.1931448777777778 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A395"
      },
      {
        "us": { "cost": 51.112785, "conversions": 51, "cpi": 1.0022114705882352 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A350"
      }
    ]
  },
  {
    "date": "2019-03-28",
    "rows": [
      {
        "us": { "cost": 3089.0317680000003, "conversions": 4044, "cpi": 0.7638555311572701 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": 182.195688, "conversions": 192, "cpi": 0.948935875 },
        "code": "A376"
      },
      {
        "us": { "cost": null, "conversions": null },
        "": { "cost": 3263.879334, "conversions": 42973, "cpi": 0.07595186126172249 },
        "ca": { "cost": null, "conversions": null },
        "code": "A280"
      },
      {
        "us": { "cost": 1963.867745, "conversions": 2103, "cpi": 0.9338410580123633 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A351"
      },
      {
        "us": { "cost": 875.792645, "conversions": 887, "cpi": 0.9873648759864713 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A413"
      },
      {
        "us": { "cost": 641.692476, "conversions": 608, "cpi": 1.0554152565789474 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A410"
      },
      {
        "us": { "cost": 159.185036, "conversions": 154, "cpi": 1.0336690649350648 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A395"
      },
      {
        "us": { "cost": 62.863949, "conversions": 42, "cpi": 1.4967606904761905 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A435"
      },
      {
        "us": { "cost": 52.137478, "conversions": 26, "cpi": 2.0052876153846153 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A350"
      }
    ]
  },
  {
    "date": "2019-03-27",
    "rows": [
      {
        "us": { "cost": null, "conversions": null },
        "": { "cost": 2796.251914, "conversions": 35642, "cpi": 0.07845384417260536 },
        "ca": { "cost": null, "conversions": null },
        "code": "A280"
      },
      {
        "us": { "cost": 2081.529258, "conversions": 2749, "cpi": 0.7571950738450346 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": 192.078027, "conversions": 239, "cpi": 0.8036737531380753 },
        "code": "A376"
      },
      {
        "us": { "cost": 1132.3558349999998, "conversions": 1368, "cpi": 0.8277454934210525 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A351"
      },
      {
        "us": { "cost": 707.86356, "conversions": 870, "cpi": 0.813636275862069 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A413"
      },
      {
        "us": { "cost": 511.586448, "conversions": 549, "cpi": 0.9318514535519126 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A410"
      },
      {
        "us": { "cost": 95.505025, "conversions": 91, "cpi": 1.0495057692307692 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A395"
      },
      {
        "us": { "cost": 53.636385, "conversions": 43, "cpi": 1.2473577906976743 },
        "": { "cost": null, "conversions": null },
        "ca": { "cost": null, "conversions": null },
        "code": "A435"
      }
    ]
  }
]

header.js

export default header = [
  { "label": "Date", "name": "date", "type": "date" },
  { "label": "Code", "name": "code", "type": "string" },
  {
    "label": "US",
    "name": "us",
    "is_country": true,
    "children": [
      { "label": "Cost", "name": "cost", "type": "number" },
      { "label": "Conversion", "name": "conversions", "type": "int" },
      { "label": "CPI", "name": "cpi", "type": "number" }
    ]
  },
  {
    "label": "",
    "name": "",
    "is_country": true,
    "children": [
      { "label": "Cost", "name": "cost", "type": "number" },
      { "label": "Conversion", "name": "conversions", "type": "int" },
      { "label": "CPI", "name": "cpi", "type": "number" }
    ]
  },
  {
    "label": "CA",
    "name": "ca",
    "is_country": true,
    "children": [
      { "label": "Cost", "name": "cost", "type": "number" },
      { "label": "Conversion", "name": "conversions", "type": "int" },
      { "label": "CPI", "name": "cpi", "type": "number" }
    ]
  }
]

util.js

/**
 * cgrid 的 field 字段生成函数
 */
export const CGGRID_FORMATTER = {
  int: (name) => (rec) => (rec[name] ? vm.$numeral(rec[name]).format('0,0') : '-'),
  number: (name) => (rec) => (rec[name] ? vm.$numeral(rec[name]).format('0,0.00') : '-'),
  percent: (name) => (rec) => (rec[name] ? `${vm.$numeral(rec[name]).format('0,0.00')}%` : '-'),
  float2percent: (name) => (rec) => (rec[name] ? vm.$numeral(rec[name]).format('0.00%') : '-'),
  objectValue: (name) => (rec) => (rec[name] ? rec[name].value : '-'),
  reverseTruncate: (name) => (rec) => {
    if (!rec[name]) {
      return '-';
    }
    return reverseTruncate(rec[name], 35);
  },
  spanRows: (name) => (rec) => {
    const __value = rec[name];
    const index = rec.$_index;
    if (index === __value.rowSpanStart) {
      return __value.value;
    }
    return '';
  },
  subObjectProp: (pname, cname, formatterStr) => (rec) => {
    const target = rec[pname][cname];
    if (target) {
      return vm.$numeral(target).format(formatterStr);
    }
    return '-';
  },
};

export const FORMATTER_STR = {
  int: '0,0',
  number: '0,0.00',
  percent: '0,0.00',
  float2percent: '0.00%',
};

export const ALIGN = {
  int: 'right',
  number: 'right',
  percent: 'right',
  float2percent: 'right',
  objectValue: 'center',
};