VueDataTables sample - elementui-2.0

HTML

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/[email protected]/dist/data-tables.min.js"></script>
<div id='app'>
  <data-tables 
               :data='tableData'
               :actions-def='getActionsDef()'
               :checkbox-filter-def='getCheckFilterDef()'
               :row-action-def='getRowActionsDef()'>
    <el-table-column 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>
  </data-tables>
</div>

CSS

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

JavaScript

var dataTables = DataTables.default;

var app = new Vue({
  components: {dataTables},
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.tableData = [...new Array(100)].map((_, index) => { 
    	return  {
      'building': '9',
      'building_group': 'North',
      'cellphone': '13400000000',
      'content': 'Help to buy some drinks',
      'create_time': '2016-10-02 22:25',
      'flow_no': `FW20160101000${index}`,
      'flow_type': 'Help',
      'flow_type_code': 'help',
      'id': '2222222',
      'room_id': '00601',
      'room_no': '601',
      'state': 'Closed',
      'state_code': 'closed'
    }
    })
  },
  methods: {
     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: [{
          'code': 'created',
          'name': 'Created'
        }, {
          'code': 'assigned',
          'name': 'Assigned'
        }, {
          'code': 'accepted',
          'name': 'Accepted'
        }, {
          'code': 'closed',
          'name': 'Closed'
        }, {
          'code': 'cancelled',
          'name': 'Cancelled'
        }]
      }
    },
    getRowActionsDef() {
      let self = this
      return [{
        type: 'primary',
        handler(row) {
          self.$message('Edit clicked')
          console.log('Edit in row clicked', row)
        },
        name: 'Edit'
      }, {
        type: 'primary',
        handler(row) {
          self.$message('RUA in row clicked')
          console.log('RUA in row clicked', row)
        },
        name: 'RUA'
      }]
    }
  }
}).$mount('#app');