Vue2.0中el-table的循环写法

在有开发任务的一周，过得是相当快，这一周的开发学到不少东西，首先回忆一下在代码中使用到的table循环

一般写法

现在学会了“偷懒”，之前写的代码就跟搬运工一样，表格中的每一列都会去写一行代码：

<!-- 使用的是el-table组件 -->
<el-table
	:data="caseList"
>
    <el-table-column
    	prop="date"
        label="日期"
        width="180"             
    ></el-table-column>
    <el-table-column
    	prop="name"
        label="姓名"
        width="120"             
    ></el-table-column>
    <el-table-column
    	prop="address"
        label="地址"
        width="180"             
    ></el-table-column>
    <!-- 以此类推，有几行写几行这种格式 -->
</el-table>

“偷懒”写法

上面表格行格式一样，所填内容不一致的，我们可以直接使用v-for循环来解决：

// 先在 created 中创建 表头/数据 字段、表格宽度
created() {
    this.tableHeader = [
      {
          // key是自定义的
          label: "日期",  // label值是跟所需表头一致 
          property: "date",  // property值的字段要跟后端给的字段相对应
          width: "180",  // width值看真实表格宽度自定义
          sort: true  // 如果需要排序功能，可以加上这个
      },
	  {
          label: "姓名",
          property: "name",
          width: "120",
          sort: false
      },
      {
          label: "地址",
          property: "address",
          width: "180",
          sort: false
      }
    ];
}

html的写法为：

<el-table
	:data="caseList"
    @sort-change="点击排序功能的按钮 执行函数"
>
	<el-table-column
    	v-for="item in tableHeader"
        :key="item.property"
        :prop="item.property"      
        :min-width="item.width"  <!-- 最小宽度 -->
        :label="item.label"  <!-- 标签值 -->
        show-overflow-tooltip  <!-- 过长省略显示 -->
        :sortable="item.sort && caseList.length > 1 ? 'custom' : false"  <!-- 排序功能 -->            
    >
    	<!-- 如果有特殊内容需要更改 -->
    	<template slot-scope="scope">
    		<span v-if="item.property === 'name'">
                <!-- 简单举个例子，在姓名前加上图片 -->
            	<span v-if="scope.row[item.property]">
                    <img src="图片路径" alt="?">
                	{{ scope.row[item.property] }}
                </span>
            </span>
            <!-- 其他内容 -->
            <span>{{ scope.row[item.property] }}</span>
    	</template>
    </el-table-column>
</el-table>

scope.row[item.property]

这样的写法，好处在于，以后若是后端更改字段、前端搬迁，维护起来只需要更改 created 中的字段即可，就不需要从头开始阅读 html