var Main = {
  data() {
    return {
      tableData: [{
          date: '2018',
          name: '小海',
          address: '上海市'
        }, {
          date: '2016',
          name: '小北',
          address: '北京'
        }, {
          date: '2012',
          name: '小张',
          address: '张家口'
        }, {
          date: '2011',
          name: '小胡',
          address: '湖北'
        }],
        multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    checkSelectable(row) {
      return row.date < 2016
    }
  },
  template: `
  <div>
    <el-table
    :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      :selectable="checkSelectable"
      width="50">
    </el-table-column>
    <el-table-column
      inline-template
      label="年"
      width="120">
      <div>{{ row.date }}</div>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-tooltip-when-overflow>
    </el-table-column>
  </el-table>
  {{ multipleSelection }}
  </div>
  `
}


new Vue({
  el: '#app',
  render: h => h(Main)
})