JSFiddle - React, Tailwind, and code Playground

by zpczjl

HTML

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://rawgit.com/njleonzhang/vue-data-tables/master/dist/data-tables.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;
dataTables.install(Vue)

var app = new Vue({
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.tableData = [{
      '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'
    }]
  },
  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',
         ...