element-ui中对table数据的渲染有一些模板式的操作，基本按照模板渲染数据即可

基本模板样式如下

              <el-table

                :data="studentData.rows"

                style="width: 100%"

                stripe

                :header-cell-style="{background:'#e1e4eb'}"

              >

                <el-table-column prop="studentName" label="姓名" align="center" >

                  <template slot-scope="scope">

                    <span> {{ scope.row.studentName | filterIsAttr }}</span>

                  </template>

                </el-table-column>

                <el-table-column prop="sex"  label="性别" align="center" >

                  <template slot-scope="scope">

                    <span v-if="scope.row.sex==1"> 男</span>

                      <span v-if="scope.row.sex==0">女</span>

                  </template>

                </el-table-column>

                <el-table-column prop="idCard" label="身份证" align="center" >

                  <template slot-scope="scope">

                    <span v-if="scope.row.idCard===0" style="color:red;">未采集</span>

                      <span v-if="scope.row.idCard===1">已采集</span>

                  </template>

                </el-table-column>

                <el-table-column  label="操作" width="200px" align="center" >

                  <template slot-scope="scope">

                      <el-button class="color_blue" plain  type="text" @click="showEdit(scope.row.id)"

                      >编辑</el-button>

                    <el-button class="color_yellow" plain @click="delStudent(scope.row.id)"

                      >删除</el-button

                    >

                  </template>

                </el-table-column>

              </el-table>

            </div>

            <!-- 分页 -->

            <div class="pagination-container" v-if="studentData.total>0">

              <el-pagination

                background

                @size-change="handleSizeChange"

                @current-change="handleCurrentChange"

                :current-page="studentData.pageNumber"

                :page-sizes="[10, 20, 30, 40, 50]"

                :page-size="studentData.pageSize"

                layout="total, sizes, prev, pager, next"

                :total="studentData.total"

              >

              </el-pagination>

            </div>

             <div v-if="studentData.total===0" style="text-align:center;margin-top:100px;">

                  <img src="../../assets/images/数据为空的.jpg" alt="">

              </div>

methods(){

    // 处理分页

    handleSizeChange(val) {

        console.log('处理分页')

        this.sizeChange(this.studentData, val)

        this.getStudentList()

    },

    // 当前页

    handleCurrentChange(val) {

        console.log('处理当前页')

        this.studentData.pageNumber = val

        this.getStudentList()

    },

//数据渲染部分

    getStudentList() {

      this.loading = true

      if (this.isIE()) this.studentData.total = -1

      studentList(

      后端定义要传的字段

        this.studentData.pageNumber,

        this.studentData.pageSize

      )

        .then(res => {

               //数据渲染

          console.log('所有的学生数据', res)

          this.loading = false

          this.studentData.rows = res.data

          this.studentData.total = res.dataTotal

          this.tableTotalReplace(this.studentData.total)

        })

        .catch(error => {

          this.loading = false

        })

    },

},

 mounted() {

    // 页面加载时候进行学生列表渲染

    this.getStudentList()

  }