💡 Super flexible Vue table component base on configuration.

Strongly recommend used by the project which alread use element-ui and jsx 🐶 .

Example

<template>
  <Txcel
    :data="tableData"
    :columns="cols"
    :pager="{
      layout: 'total,prev,pager,next,jumper',
      page: page,
      page_size: page_size,
      total: count,
    }"
    @change="handlePage"
    @cellChange="handleCellChange"
    class="mt20"
  />
</template>

<script>
import cols from './tableConfig'

export default {
  data() {
    return {
      tableData: [
        {
          name: 'txcel',
          tag: ['tag1', 'tag2'],
          version: '0.1.0',
        },
      ],
      cols: cols(this),
      page: 1,
      page_size: 10,
      count: 1,
    }
  },

  methods: {
    handleEdit() {
      console.log('edit')
    },

    handleCellChange(type, data) {
      console.log(type, data)
    },

    handlePage(page) {},
  },
}
</script>

tableConfig.js

export default function tableCols(vm) {
  return [
    {
      label: '名称',
      prop: 'name',
      width: 120,
    },
    {
      label: '版本',
      prop: 'version',
    },
    {
      label: '标签',
      prop: 'tag',
      render: (h, p) => (
        <div>
          { p.row.tag.map(tag => <el-tag size="mini">{ tag }</el-tag>) }
        </div>
      ),
    },
    {
      label: '操作',
      render: (h, p) => (
        <div>
          <el-button type="text" onClick={ vm.handleEdit }>Edit</el-button>
          <el-button type="text" onClick={ this.emitCell('delete', p.row.id) }>Delete</el-button> // provide by Txcel component，auto injected
        </div>
      ),
    },
  ]
}

result:

Usage

npm i txcel -S
# OR
yarn add txcel

After install, register component

import Txcel from 'txcel'

Vue.use(Txcel)

The default target of import is the source-code(un-handle with webpack and babel).

If you alread use element-ui and jsx in your project, you can use it directly.

If you don't use jsx. U should add transform-vue-jsx babel plugin.

Note: Vue Cli 3 auto add this dev dependency.

If you don't use element-ui in your project, you can use the packaged version:

import Txcel from 'txcel/dist/txcel.common.js'
import 'txcel/dist/txcel/css'

Vue.use(Txcel)

Handle complex table cell

We use jsx to handle complex table cell. If your project is created by vue-cli, you don't need do anything, just use jsx. If not, you should add transform-vue-jsx which is a babel plugin in your project。 There are 2 ways to do this, one of it is use render function

  {
    label: '操作',
    render: (h, p) => (
      <div>
        { p.row.tag.map(tag => <el-tag size="mini">{ tag }</el-tag>) }
      </div>
    ),
  },

another way is construct a Vue defination Object

  component: {
    props: { row: Object },
    render() {
      return (
        <div>
          { this.row.tag.map(tag => <el-tag size="mini">{ tag }</el-tag>) }
        </div>
      )
    },
  },

Obviously, the first one is recommended.

Handle cell event

It's very usual that there are some button in cell or you want call some methods when click a cell. There are 2 ways to do it.

1. just like the example code, there is an Edit button. We pass the vm(this) to the function who generate columns config.

data() {
  return {
    ...
    // pass this to function cols, so you can use methods in this(this Vue compomemt)
    cols: cols(this),
    ...
  }
}

// function cols,
function cols(vm) {
  return [
    {
      label: '操作',
      render: (h, p) => (
        <div>
          <el-button type="text" onClick={ vm.handleEdit }>Edit</el-button>
          <el-button type="text" onClick={ this.emitCell('delete', p.row.id) }>Delete</el-button>
        </div>
      ),
    }
  ]
}

2.use emitCell. Just like the delete button in example code above，the emitCell method is provide by the upper Txcel component and auto injected.

API

The basic table component use the table component of element-ui, so you can add all props of el-table-column in columns configuration(just like in tableConfig.js above)

props

prop-name	description	type	options	default
data	the data to show in the table	Array
columns	the configuration of table-column	Array
rowSelection	is show the selection row	Boolean		false
pager	pagination configuration	Object/Boolean		default pager
options	raw props of el-table	Object

events

event name	description	params
change	trigger when page-change or sort-change	{ pagination, sortInfo }
cellChange	trigger when explicit call emitCell in tablleConfig	type, data

Default pager

{
  layout: 'total,prev,pager,next,jumper',
  page: 1,
  page_size: 10,
  total: 0,
}