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

Posted 2021-03-22 smart-girl

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