vue element table

el-table绑定数据框数据
el-table-column绑定key
template slot-socpe用来接收该行的数据,用来定制化一些操作

<template>
  <!--data绑定整个列表-->
  <el-table
    :data="tableData"
    style="width: 100%">
    <!--prop用来绑定列明,对应对象的key-->
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!--使用template的slot-scope来接收当前行的数据,用来定制化数据,比如取年份-->
    <el-table-column
      label="详细数据">
      <template slot-scope="scope">
        {{scope.row}}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      tableData: [{
        name: '王小虎',
        state: true
      }, {
        name: '王小虎',
        state: false
      }]
    }
  }
}
</script>
<style scoped>

</style>