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'>
  <data-tables ref="proposalTable" :tableProps="tableProps" :data='tableData'>
    <el-table-column prop="content" label="Content" key="content" sortable="custom">
    </el-table-column>
    <el-table-column prop="building" label="Building" key="building" sortable="custom">
    </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: [],
      tableProps: {rowKey: 'id', 'default-expand-all': true,       defaultSort: {
          prop: 'id',
          order: 'descending'
        }},
    }
  },
  created() {
    this.tableData = [{
      'building': '5',
      'content': 'Water flood',
      'child': false,
      'id': 0,
   		'children': [{'id': 2, 'building': '10', 'content': 'Test', 'child': true}]
    }, {
      'building': '6',
      'content': 'ABC123',
      'child': false,
      'id': 1,
   		'children': [{'id': 3, 'child': true, 'building': '12', 'content': 'Test 123'}]
    }]
  },
  methods: {
    
  }
}).$mount('#app');