JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/data-tables.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<div id='app'>
  <el-table
               :data='tableData'
               border
               :actions-def='getActionsDef()'
               :checkbox-filter-def='getCheckFilterDef()'
               :row-action-def='getRowActionsDef()'>
    <el-table-column fixed prop="flow_no" label="No." sortable="custom">
    </el-table-column>
    <el-table-column prop="content" label="Content" sortable="custom">
    </el-table-column>
    <el-table-column prop="create_time" label="Time" sortable="custom">
    </el-table-column>
    <el-table-column prop="state" label="State" sortable="custom">
    </el-table-column>
    <el-table-column prop="flow_type" label="Type" sortable="custom">
    </el-table-column>
    <el-table-column prop="building_group" label="Building group" sortable="custom">
    </el-table-column>
    <el-table-column prop="building" label="building" sortable="custom">
    </el-table-column>
    <el-table-column prop="room_no" label="no" sortable="custom">
    </el-table-column>
    <el-table-column prop="cellphone" label="tel" sortable="custom" :width="500">
    </el-table-column>
    <div slot="append">
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      
    </tr>
    </div>
  </el-table>
  
  <button @click='toggleData'>
    toggle data
  </button>
</div>

CSS

https://jsfiddle.net/#editor-options

JavaScript

var dataTables = DataTables.default;

var data = [{
      'building': '5',
      'building_group': 'North',
      'cellphone': '13400000000',
      'content': 'Water flood',
      'create_time': '2016-10-01 22:25',
      'flow_no': 'FW201601010001',
      'flow_type': 'Repair',
      'flow_type_code': 'repair',
      'id': '111111',
      'room_id': '00501',
      'room_no': '501',
      'state': 'Created',
      'state_code': 'created'
    }, {
      'building': '6',
      'building_group': 'Sourth',
      'cellphone': '13400000000',
      'content': 'Lock broken',
      'create_time': '2016-10-01 22:25',
      'flow_no': 'FW201601010002',
      'flow_type': 'Repair',
      'flow_type_code': 'repair',
      'id': '2222222',
      'room_id': '00701',
      'room_no': '701',
      'state': 'Assigned',
      'state_code': 'assigned'
    }, {
      'building': '9',
      'building_group': 'North',
      'cellphone': '13400000000',
      'content': 'Help to buy some drinks',
      'create_time': '2016-10-02 22:25',
      'flow_no': 'FW201601010002',
      'flow_type': 'Help',
      'flow_type_code': 'help',
      'id': '2222222',
      'room_id': '00601',
      'room_no': '601',
      'state': 'Closed',
      'state_code': 'closed'
    }]

var app = new Vue({
  components: {dataTables},
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.tableData = data
  },
  methods: {
  	 toggleData() {
     	 this.tableData = this.tableData.length > 0 ? [] : data
     },
     getActionsDef() {
      let self = this;
      return {
        width: 5,
        def: [{
          name: 'new',
          handler() {
            self.$message('new clicked')
          },
          icon: 'plus'
        }, {
          name: 'import',
          handler() {
            self.$message('import clicked')
          },
          icon: 'upload'
        }]
      }
    },
    getCheckFilterDef() {
      return {
        width: 14,
        props: 'state_code',
        def: [{
...