Element UI在vue2中实践总结

element 使用循环和 template 实现一个 table-column循环数据和数据的过滤

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="col in column"
      :key="col.id"
      :prop="col.prop"
      :lable="col.label"
      :width="col.width"
    >
      <template slot-scope="{ row }">
        <span v-if="column.prop == 'name'">
          {{ row.name | nameFilter }}
        </span>
        <span v-else>
          {{ row[column.prop] }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  filter: {
    nameFilter(val) {
      return val;
    },
  },
  data() {
    return {
      column: [
        { prop: "id", label: "ID", width: "" },
        { prop: "name", label: "姓名", width: "" },
      ],
      tableData: [
        { id: 1, name: "a" },
        { id: 2, name: "b" },
        { id: 3, name: "c" },
      ],
    };
  },
};
</script>