element-ui的表格功能比较少，所以找到vxe-table这个关于table的控件，可以满足大部分的需求，主要支持表格内单元格的渲染，且单元格可自定义，在单元格内可引用组件并渲染，基本的ui组件，button、input、select、弹窗等。数据渲染方式简单，高效,并且和各个ui库兼容

vxe-table的安装和引用

官网：vxe-table

// 安装
npm install xe-utils vxe-table

// 引用 index.js
	  import Vue from 'vue'
      import 'xe-utils'
      import VXETable from 'vxe-table'
      import 'vxe-table/lib/style.css'

      Vue.use(VXETable)

      // 给 vue 实例挂载内部对象，例如：
      Vue.prototype.$XModal = VXETable.modal
      Vue.prototype.$XPrint = VXETable.print
      Vue.prototype.$XSaveFile = VXETable.saveFile
      Vue.prototype.$XReadFile = VXETable.readFile
 // 全局引用 main.js
 import '@/components/index'

基本使用

<template>
  <div>
    <vxe-table border :align="allAlign" :data="tableData">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="age" title="Age"></vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      allAlign: null,
      tableData: [
        {
          id: 10001,
          name: 'Test1',
          role: 'Develop',
          sex: 'Man',
          age: 28,
          address: 'vxe-table 从入门到放弃'
        },
        {
          id: 10002,
          name: 'Test2',
          role: 'Test',
          sex: 'Women',
          age: 22,
          address: 'Guangzhou'
        },
        {
          id: 10003,
          name: 'Test3',
          role: 'PM',
          sex: 'Man',
          age: 32,
          address: 'Shanghai'
        },
        {
          id: 10004,
          name: 'Test4',
          role: 'Designer',
          sex: 'Women ',
          age: 24,
          address: 'Shanghai'
        }
      ]
    }
  }
}
</script>

图例