2021-07-19 工作记录--PC端-Element-分页 + 格式化时间戳 + PC端-Element-表格

一、PC端-Element-分页

<!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="formInline.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="formInline.limit"
      layout="sizes, prev, pager, next"
      class="pageBox"
      :total="sum"
    >
    </el-pagination>

对应代码：

// 每天条数切换 更新表格数据
    handleSizeChange(size) {
      this.formInline.limit = size;
      this.getList();
    },
    // 切换page 更新表格数据
    handleCurrentChange(currentPage) {
      this.formInline.page = currentPage;
      this.getList();
    },

二、格式化时间戳

对应代码：

// 格式化时间戳
    formatTimeStamp(timestamp) {
      var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      // var h = date.getHours() + ':'
      // var m = date.getMinutes() + ':'
      // var s = date.getSeconds()
      // return Y+M+D+h+m+s
      return Y + M + D;
    },

举例：

三、PC端-Element-表格

<!-- 表格 -->
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%; border-radius: 10px"
        :header-cell-style="{
          'background-color': '#C92A1D',
          color: '#fff',
          'text-align': 'center',
        }"
        :header-row-style="{ 'border-radius': '1rem' }"
      >
        <el-table-column prop="id" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="real_thumb_tmp" label="头像" align="center">
          <template slot-scope="scope">
            <img
              width="26px"
              :src="
                scope.row.real_thumb_tmp
                  ? scope.row.real_thumb_tmp
                  : 'http://swt-app.oss-cn-chengdu.aliyuncs.com/images/20200928/1042391601280623.png'
              "
            />
          </template>
        </el-table-column>
        <el-table-column prop="real_name" label="客户名称" align="center">
        </el-table-column>
        <el-table-column prop="pool_type" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="username" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="code" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="pid_name" label="推荐人" align="center">
        </el-table-column>
        <el-table-column prop="class_hour" label="普课" align="center">
        </el-table-column>
        <el-table-column prop="private_class" label="私课" align="center">
        </el-table-column>
        <el-table-column prop="card" label="购卡类型" align="center">
        </el-table-column>
        <el-table-column prop="user_type" label="客户类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.user_type == 0">未购买课时的用户</span>
            <span v-if="scope.row.user_type == 1">体验课用户</span>
            <span v-if="scope.row.user_type == 2">订金用户</span>
            <span v-if="scope.row.user_type == 3">全款用户</span>
            <span v-if="scope.row.user_type == 4">退款用户</span>
            <span v-if="scope.row.user_type == 5">分卡用户</span>
          </template>
        </el-table-column>
        <el-table-column prop="school_name" label="校区" align="center">
        </el-table-column>
        <el-table-column prop="register_port" label="注册来源" align="center">
        </el-table-column>
        <el-table-column prop="input_time" label="录入时间" align="center">
          <template slot-scope="scope">
            <span>{{ formatTimeStamp(scope.row.input_time) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="用户状态" align="center">
        </el-table-column> -->
        <el-table-column
          class="operate"
          prop="address"
          label="操作"
          align="center"
          style="position: relative"
        >
          <template>
            <el-button
              class="tracking_btn"
              type="text"
              @click="dialogTableVisible = true"
              >追踪</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

补充知识：


对应代码：

format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"