VueDataTables sample

by zpczjl

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="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue-data-tables/dist/data-tables.min.js"></script>
<div id='app'>
  <el-button @click='toggleShow'>toogle Content column</el-button>
  <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" type="expand">
      <template slot-scope="props">
        <p>State: {{ props.row.building }}</p>
        <p>City: {{ props.row.building_group }}</p>
        <p>Address: {{ props.row.cellphone }}</p>
        <p>Zip: {{ props.row.content }}</p>
      </template>
    </el-table-column>
    <el-table-column v-if='show' 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.DataTables;

console.log(DataTables)

var app = new Vue({
  components: {
    dataTables
  },
  data() {
    return {
      tableData: [],
      show: true,
    }
  },
  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: {
  	toggleShow() {
    	this.show = !this.show
      console.log(this.show)
    },
    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:...