La forma el-table de Element se usa en combinación con la paginación el-pagination

I. Introducción.

Ya he hablado sobre los escenarios de desarrollo de proyectos de hoy. Cuando se trata de requisitos de lista , la mayoría de ellos se realizan combinando tablas (el-table) y paginación (el-pagination) , es decir, el front-end procesa el número de página y la página actual inicia la solicitud y el back-end proporciona los datos correspondientes, y este artículo describirá cómo implementarlo de manera elegante y eficiente para este efecto . Por supuesto, en casos excepcionales, el backend devuelve todos los datos a la vez, y el frontend maneja la paginación por sí mismo.Para esta parte, puede consultar mi otro artículo Paginación frontend pura, y no lo repetiré aquí .

2. Encapsule la forma común js (mezcle en mixins para lograrlo).

ilustrar:

Cree una carpeta mixins debajo de la carpeta src y cree un archivo table.js en ella como los mixins de la tabla general. Después de eso, puede importar e importar el archivo js combinado correspondiente en el componente de lista de negocios específico y finalmente mixins: [table]usarlo.

Código central:

tabla.js:

export default {
    data() {
        return {
            tableData: [],    //用于存储列表的数据
            tableHeight: '500', //列表的初始高度
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
            loading: false, //列表的数据加载loading状态
        }
    }
}

Componentes específicos de la lista de empresas:

import table from "mixins/table";

mixins: [table],

3. Combinación de el-table y el-pagination.

Descripción: Integre las características de la tabla (el-table) y la paginación (el-pagination) y la API correspondiente, y combine tableData , pageSize y otras variables definidas en el archivo table.js en los mixins (mixins) para realizar el perfecta visualización de datos y traducción de los componentes comerciales Las páginas y otras operaciones extraen los datos correspondientes en tiempo real. (PD: por supuesto, los parámetros de los escenarios comerciales respectivos se discuten con las botas para niños de back-end y se pueden cambiar en consecuencia).
Código central:

Componentes específicos de la lista de empresas:

<template>
  <div class="h-p-100">
    <div class="g-page-title clearfix">
      <p>{
   
   { $route.meta.title }}</p>
      <div class="f-r">
        <el-button @click="getWorkOrderList()">刷新</el-button>
      </div>
    </div>
    <div class="f-l p-card-info-wrap" style="width: 100%">
      <div class="g-table-header">
        <el-input
          v-model.trim="search.sn"
          clearable
          placeholder="请输入编号"
          class="w-230 umar-r10 umar-b10"
        ></el-input>
        <el-button type="primary" class="umar-b10" @click="getWorkOrderList(1)"
          >查询</el-button
        >
        <el-button type="success" class="umar-b10" @click="handleReset"
          >重置</el-button
        >
      </div>
      <div class="g-table-content">
        <el-table
          :data="tableData"
          :height="tableHeight"
          border
          header-cell-class-name="g-table-header-cell"
          :highlight-current-row="true"
          v-loading="loading"
        >
          <el-table-column
            prop="id"
            label="ID"
            min-width="120"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="sn"
            label="编号"
            min-width="180"
            show-overflow-tooltip
          >
          </el-table-column>
          </el-table-column>
          <el-table-column label="状态" min-width="100">
            <template slot-scope="{ row }">
              <div v-if="row.status == 2" style="color: green">已确认</div>
              <div v-else style="color: red">未确认</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="180"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" min-width="120" fixed="right">
            <template slot-scope="{ row }">
              <span
                class="g-table-btn"
                @click="handleClose(row)"
                v-if="row.status != 2"
                ><i class="icon iconfont el-icon-switch-button"></i
                >确认</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="g-table-page clearfix">
        <el-pagination
          class="f-r uinn-tb10"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 100, 200, 500]"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import table from "mixins/table";
import * as API from "api/inter_expir_reminder/inter_expir_reminder";
export default {
  mixins: [table],
  data() {
    return {
      search: {
        sn: "",
      },
    };
  },
  watch: {},
  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.getWorkOrderList();
    },
    //获取列表数据
    getWorkOrderList(currentPage = this.currentPage) {
      this.loading = true;
      let data = new URLSearchParams();
      for (let i in this.search) {
        if (this.search[i]) {
          data.append(i, this.search[i]);
        }
      }
      data.append("current", currentPage);
      data.append("size", this.pageSize);
      API.getJkList(data)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.tableData = res.data;
            this.total = res.total;
            this.currentPage = currentPage;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    //重置
    handleReset() {
      for (let i in this.search) {
        this.search[i] = "";
      }
      this.getWorkOrderList();
    },
    //切换当前页的容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getWorkOrderList(1);
    },
    //翻页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getWorkOrderList();
    },
    //操作
    handleClose(row) {
      console.log(row);
    },
  },
};

</script>

4. Tratamiento de datos (borrado y otras operaciones).

Eliminar operación:

ilustrar:

La operación de eliminación en la lista debe actualizar la lista actual después de que la interfaz de eliminación se solicite con éxito Además de esto, para lograr un efecto humanizado más perfecto, se debe considerar en la operación de eliminación si la fila actual se eliminará es la página actual La última (si lo es, entonces debe volver a la página anterior ), y es necesario considerar si la página actual es la primera página ( actualizar la primera página directamente ).

Diagrama de código de caso y núcleo:

Modificar, editar, habilitar, deshabilitar, etc.:

ilustrar:

Las operaciones como modificar, editar, habilitar y deshabilitar en la lista deben actualizar la lista después de que la interfaz correspondiente se haya solicitado con éxito y mantener la página donde se realizó la operación , para garantizar la precisión de los datos y la facilidad de uso. operación.

Diagrama de código de caso y núcleo:

Analizar gramaticalmente:

Es por eso que establecemos el valor predeterminado y lo asignamos a la página actual en el método de solicitud de datos de la lista. Es combinar los datos de la lista y las páginas bajo varias operaciones en tiempo real para mejorar la humanización y la operatividad.

5. Conclusión:

Creo que a través de la breve descripción y el plan anteriores, cuando se encuentren con requisitos de lista en el futuro, las botas para niños no solo mostrarán una lista de datos simple, sino que también considerarán la operación del usuario y la experiencia humanizada tanto como sea posible. De esta manera, la tabla de Element (el-table) y la paginación (el-pagination) se pueden usar perfectamente.