初学elementUI，请问使用v-for标签如何生成不同的el-table-column标签

Question

<el-table-column class="student-number" prop="studentNo" label="学号" fixed></el-table-column>
              <el-table-column prop="studentName" label="姓名" fixed></el-table-column>
              <el-table-column
                prop="studentGender"
                :formatter="formatterSex"
                label="性别">
              </el-table-column>
              <el-table-column prop="studentName" label="身份证" ></el-table-column>
              <el-table-column prop="mobile" label="手机号"></el-table-column>
              <el-table-column prop="licenseType" label="证型"></el-table-column>
              <el-table-column prop="classType" label="班型" ></el-table-column>
              <el-table-column prop="agentCode" label="代理区域"></el-table-column>
              <el-table-column prop="trainStartDate" label="练车日期"></el-table-column>
              <el-table-column prop="currentStartTrainTime" label="开始时间" ></el-table-column>
              <el-table-column prop="currentEndTrainTime" label="结束时间"></el-table-column>
              <el-table-column prop="todayCourseCount" label="当日课时数"></el-table-column>
              <el-table-column prop="trainEndDate" label="结束日期" ></el-table-column>
              <el-table-column prop="continuousDays" label="练车天数"></el-table-column>
              <el-table-column prop="isFirst" label="是否初次"></el-table-column>
              <el-table-column prop="studentName" label="培训科目" ></el-table-column>
              <el-table-column prop="studentName" label="已约课时数"></el-table-column>
              <el-table-column prop="coachGroupName" label="教练组"></el-table-column>
              <el-table-column prop="studentName" label="教练"></el-table-column>
              <el-table-column prop="enrolTime" label="报名时间"></el-table-column>
              <el-table-column prop="detailedAddress" label="地址">

主要是生成三个不同的el-table-column标签

<el-table-column class="student-number" prop="studentNo" label="学号" fixed></el-table-column>
              <el-table-column prop="studentName" label="姓名" fixed></el-table-column>

              <el-table-column
                prop="studentGender"
                :formatter="formatterSex"
                label="性别">
              </el-table-column>

<el-table-column prop="studentName" label="身份证" ></el-table-column>

能轮询生成这五个标签就行

<el-table-column class="student-number" prop="studentNo" label="学号" fixed></el-table-column>

          <el-table-column prop="studentName" label="姓名" fixed></el-table-column>
          <el-table-column
            prop="studentGender"
            :formatter="formatterSex"
            label="性别">
          </el-table-column>
          <el-table-column prop="studentName" label="身份证" ></el-table-column>
          <el-table-column prop="mobile" label="手机号"></el-table-column>
          <el-table-column prop="licenseType" label="证型"></el-table-column>

Answer 1

// 提成一个小组件
<template>
  <el-table :data='data'>
    <el-table-column
      v-for="item in tableHead"
      :label="item.name"
      :key="item.name"
      :prop="item.prop"
      :fixed="item.fixed"
    >
       <template slot-scope="scope">
          <slot :name="item.prop" :value="scope.row"></slot>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    props: {
      tableHead: {
        type: Array,
        default: () => []
      },
      data: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        
      }
    }
  }
</script>

// 调用
<template>
  <common-table
    :table-head='tableHead'
    :data='data'
  >
   <div slot='studentNo' slot-scope="props">
     <span>{{props.value.studentNo}}</span>
   </div>
   <div slot='studentName' slot-scope="props">
     <span>{{props.value.studentName}}</span>
   </div>
   <div slot='sex' slot-scope="props">
     <span>{{props.value.sex | sexFilter}}</span>
   </div>
  </common-table>
</template>

<script>
  import commonTable from './aa/common-table.vue' // 名称路径写实际路径
  export default {
    data () {
      return {
        tableHead: [
            {
              name: '学号',
              prop: 'studentNo',
              value: 'studentNo',
              fixed: true
            },
            {
              name: '姓名',
              prop: 'studentName',
              value: 'studentName',
              fixed: false
            },
            {
              name: '性别',
              prop: 'sex',
              value: 'sex',
              fixed: false
            }
        ],
        data: [
          {
            studentNo: 'no01',
            studentName: '张三'，
            sex: 0
          }
        ]
      }
    },
    filter: {
      sexFilter (val) {
        return val ? '男' : '女'
      }
    }
  }
</script>