前端开发学习

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

前端开发学习

1、将后端返回的字段转换为其他内容

后端返回的字段是枚举值，前端需要转换为业务表达方式时，需要将枚举值和业务名次进行映射，才能正确显示业务含义。

最简单的就是性别字段，后端可能只是返回了0和1，前端需要解析为男和女，或者是状态值，状态值包括0、1、2、3、4，分别对应未开始、就绪态、进行中、已停止、异常，此时就需要将状态编码映射到具体内容上，才能展示在前端页面中。

此转换有两种方式，第一种直接用slot-scope="scope"的属性设定单元格内容，或者使用表格单元格中的formatter属性去设置映射方法。

    <el-table
        :data="demoList"
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
  
  <el-table-column prop="num" label="数量" width="100">
          <template slot-scope="scope">
            <div>{{ (scope.row.num)*100 }}</div>
          </template>
        </el-table-column>
           </el-table>

   
     <el-table
        :data="statusTestList"
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
   <el-table-column
          :formatter="tableStatus"
          label="状态"
          width="80"
          prop="Status"
        />
 </el-table>  
 
        export default {
         methods: {
      tableStatus: function(row, column, cellValue, index) {
      console.log('row.Status' + row.Status)
      console.log('cellValue' + cellValue)
      if (row.Status === 0) {
        return '未开始'
      } else if (row.Status === 1) {
        return '就绪态'
      } else if (row.Status === 2) {
        return '进行中'
      } else if (row.Status === 3) {
        return '已停止'
      } else if (row.Status === -1) {
        return '异常'
      }
    },
         }

2、如何写分页

首先将分页的规则定一下，通过一个list设置10、20、30、50的参数，表示分页时每页数量限制，然后是指定的页码current-page，全部的数量total。 然后在调用方法中将当前选择的页码传给后端，获得数据后，更新页数和页码。

  <div class="block">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          :total="listTotal"
          layout="total, sizes, prev, pager, next, jumper"
          style="float:right; margin-right:50px;margin-top:10px;margin-bottom:55px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      
      export default {
         created() {
    this.pageSize = 10
    this.currentPage = 1
  },
      data() {
    return {
      currentPage: 1,
      pageSize: 10,
      }
       methods: {
         
      init() {
      this.listFilter = {
        projectName: '',
        businessLine: '',
        submitTime: '',
        releaseTime: ''
      }
      this.currentPage = 1
      const param = {
        pageSize: this.pageSize,
        pageIndex: this.currentPage
      }
      this.getServerList(param)
    },
       handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      const param = this.GetListParam()
      this.getList(param)
    },
     handleCurrentChange(val) {
      this.currentPage = val
      const param = this.GetListParam()
      this.getList(param)
    },
      getList(param) {
      testList(param).then(res => {
        if (
          res.data &&
          res.data.status === true &&
          res.data.responseCode === 200
        ) {
         
          this.pageSize = res.data.entry.pageSize
          this.listTotal = res.data.total
          const data = res.data.list
        }
    },
      GetListParam() {
      const param = {
        pageSize: this.pageSize,
        pageIndex: this.currentPage
      }
      return param
    },
    }