element的el-table-column循环渲染和自定义列

// 自定义组件
<template>
    <div class="x__table>
        <el-table
            v-loading="tableLoading"
            :data="tableData"
            border
            stripe>
            <el-table-column
                v-if="index"
                type="index"
                label="序号"
                align="center"
                width="50">
                <template slot-scope="scope">
                    <span>{{ scope.$index + (page.current - 1) * page.size + 1 }}</span>
                </template>
            </el-table-column>
            <template v-for="(item, index) in tableOption">
                <el-table-column
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :align="item.align || 'center'"
                    :show-overflow-tooltip="item.overHidden || true">
                    <template slot-scope="scope">
                        // 这里通过插槽实现自定义列
                        <slot
                            v-if="item.slot"
                            :name="scope.column.property"
                            :row="scope.row"
                            :$index="scope.$index"
                        />
                        <span v-else>{{ scope.row[scope.column.property] }}</span> // 这里的property自己打印出来看看就明白了
                    </template>
                </el-table-column>
            </template>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <slot
                        name="menu"
                        :row="scope.row"
                        :$index="scope.$index"
                    />
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 --> // 这里的分页器也是封装的一个组件，主要是和序号关联起来
        <Pagination
            v-show="page.total>0"
            :total="page.total"
            :page.sync="page.current"
            :limit.sync="page.size"
            @pagination="pageChange"
        />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/index' // 有需要的下次再贴代码
export default {
  name: 'XTable',
  components: {
    Pagination
  },
  props: {
    index: {
      type: Boolean,
      default: function() {
        return true
      }
    },
    tableLoading: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableOption: {
      type: Array,
      default: function() {
        return []
      }
    },
    page: {
      type: Object,
      default: function() {
        return {
          total: 0,
          current: 1,
          page: 10
        }
      }
    }
  },
  methods: {
    pageChange() {
      this.$emit('page-change')
    }
  }
}
</script>