Vue.js进阶【5-1-1】element-ui el-table el-table-column

Vue.js进阶文章列表

对下面代码的梳理：

data(){

     return { tableData:[]}

}

代码	含义
tableData	Vue的data成员，用来填充整个表格的数据
tableData[i]	{   date: "2016-05-01",   name: "王小虎",   address: "上海市普陀区金沙江路 1519 弄" } 一个Jason对象，属性名对应表格的标题；属性值对应表格的一行数据；
<el-table>	element-ui的表格对象；<el-table :data="tableData"> 绑定模型数据
<el-table-column	1 表格的一列 2 :prop="name" 这一列通常要绑定模型的一个属性，从而这一列的数据都是这个属性，比如模型的name； 3 label="姓名" 表格的标题 4 多列可以用v-for生成
slot-scope="scope"	1 slot-scope="scope" 来取得作用域插槽:data绑定的数据，scope可以随便替换其他名称，只是定义对象来代表取得的data数据，便于使用 2 scope._self可以获得整个vue对象，所以可以直接获得data()

上代码

<template>
  <div class="hello">
    <el-table :data="tableData">
      <el-table-column v-for="(item,index) in columnList" :key="index" :prop="item.prop" :label="item.prop">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  mounted(){
    for(let key in this.tableData[0]){
      this.columnList.push({prop:key})
    }
    console.log('columnList =' + JSON.stringify( this.columnList))
  },
  data () {
    return {
      columnList:[],//[{"prop":"date"},{"prop":"name"},{"prop":"address"}]
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]

    }
  }
}
</script>