JSFiddle - React, Tailwind, and code Playground

by 静 轩

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
  <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180">
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180">
      </el-table-column>
      <el-table-column prop="address" label="Address">
      </el-table-column>
    </el-table>
   <el-button type="success" size="small" class="btn-width" @click.prevent="onChangeData">Call Child Function To Update</el-button>
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'Jade',
        address: 'China'
      }, {
        date: '2016-05-04',
        name: 'Rayso',
        address: 'Cambridge'
      }, {
        date: '2016-05-01',
        name: 'Scarlett',
        address: 'New York'
      }, {
        date: '2016-05-01',
        name: 'Scarlett',
        address: 'Shan Shan'
      }, {
        date: '2017-04-21',
        name: 'Scarlett',
        address: 'Han Dong'
      }]
    }
  },
  methods: {
    onChangeData () {
    	this.tableData = this.$refs.sonitem.getUpdatedChildData()
    }
  }
});