封装自定义表格组件

技术栈： vue2.0 +js +webpack
需求： 封装数据渲染的动态表格组件
1.实现字典表的转译
2.排序号的自动编译
3.自定义字段
4.操作栏的自定义

封装组件代码：

组件的使用：

数据：

export const columns = [{
    prop: 'text',
    label: '名称',
  },
  {
    prop: 'current',
    label: '本期',
  },
  {
    prop: 'previous',
    label: '上月同期',
  },
  {
    prop: 'lastCurrent',
    label: '去年同期',
  },
  {
    prop: 'currentRatio',
    label: '环比(%)',
    html: (row) => {
      return row.currentRatio < 0 ? `${row.currentRatio}` : row.currentRatio;
    },
  }, {
    prop: 'lastCurrentRatio',
    label: '同比(%)',
    html: (row) => {
      return row.lastCurrentRatio < 0 ? `${row.lastCurrentRatio}` : row.lastCurrentRatio;
    },
  },
]


export const tableData = [{
  text: 11,
  current: 11,
  previous: 'nini',
  lastCurrent: 22,
  currentRatio: 52525,
  lastCurrentRatio: -555
}]