element-ui中table渲染的快速用法

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()
  }