前端实现搜索分页添加功能

表格数据的添加

添加数据采取了子组件 dialog 添加，在添加后，将数据传给父组件。

整个过程分为以下几步：

对 dialog 数据进行校验；
校验之后关闭 dialog，并且将数据给到 tableDataCopy（用来备份表格数据，方便切换搜索态和正常态）
将值push到 tableData；
调取分页的函数，重新分页，重新计算总页数。

handleSave() {
      // 校验
      this.$refs.form.validate((valid, invalidFields) => {
        if (valid) {
          // 关闭dialog
          this.dialogVisible = false;
          // 给表格数据，此时也会备份数据，在监听中写入
          this.tableData.push(JSON.parse(JSON.stringify(this.addDialogForm)));
          // 分页
          this.handlePagination();
          // 重置dialog
          this.addDialogForm = {
            codeSeqNum: '',
            codeName: '',
            codeIdentifier: '',
            details: [
              {
                codeKey: '',
                codeValue: ''
              }
            ]
          };
        }
      });
    }

编辑数据

由于在编辑态和正常态切换时，就是 span 和 input 之间的切换，input 就要涉及到校验，因此选择了表单嵌套表格，用 editable 标志位切换 span 和 input，二者绑定的值相同。

<el-table-column label="标识名称" prop="codeName">
    <template slot-scope="scope">
      <h-add-form-item-row
        v-show="editable"
        :prop="`rowFormData[${scope.$index}].codeName`"
        :rules="codeRules.input"
      >
        <el-input
          v-show="editable"
          v-model.trim="scope.row.codeName"
          autofocus
          size="small"
        ></el-input>
      </h-add-form-item-row>
      <span v-show="!editable">{{ scope.row.codeName }}</span>
    </template>
  </el-table-column>

表格分页

表格分页利用了 el-pagination 标签。

<el-pagination
  :current-page.sync="currentPage"
  :page-size="20"
  layout="total, prev, pager, next"
  :total="total"
  :before-current-change="beforeCurrentChange"
  @current-change="handleCurrentChange"
></el-pagination>

初始分页

handlePagination() {
  // 回到初始页，重新计算数据总数，表格总页数
  this.currentPage = 1;
  this.total = this.tableData.length;
  this.totalpage = Math.ceil(this.total / 20);
  this.addFormItemRow.rowFormData =
    this.total > 20 ? this.tableData.slice(0, 20) : this.tableData;
},

当前页改变触发该函数

handleCurrentChange(val) {
  // 主要判断当前页是否是最后一页
  this.addFormItemRow.rowFormData =
    val === this.totalpage
      ? this.tableData.slice((val - 1) * 20, this.total)
      : this.tableData.slice((val - 1) * 20, val * 20);
},

因为涉及到编辑，希望编辑状态是不能翻页的，编辑状态和搜索状态共存时，不按保存按钮无法确定该页面编辑的数据是否希望保存。

因此在翻页前做了判断，判断是不是编辑态。

// 翻页前的钩子函数
beforeCurrentChange(val) {
  if (this.editable) {
    this.$message({
      message: '请先保存再翻页!',
      type: 'warning'
    });
    return false;
  } else {
    return true;
  }
},

搜索及重置

前端做搜索，由于搜索结果和原数据的展示用到的是同一个 table 标签来展示及操作，那其中重要的一步是对原始数据进行备份，方便连续多次搜索。

注：在搜索态的时候，是不支持添加的；在编辑态的时候，不支持搜索。

搜索需要注意几个部分：

对输入的字符串进行 trim 处理，去除前后空格；
对输入的英文字符串搜索时，应该不区分大小写；
条件单独搜索、组合搜索需要实现；
注意连续多次的搜索。
需要提前备份数据

// 代码增添了searchButtonFlag，搜索标志位，在搜索态时为true，其他为false
// 深度监听tableData，此时监听的有可能是原数据，也有可能是搜索结果
// 利用 searchButtonFlag 判断，在不是搜索态的时候，将table的表格做备份（方便同步编辑态数据）
// 这样做由于 tableData 初始为空，后台给到数据，tableData变化，数据备份
watch: {
    tableData: {
      // 深度监听
      handler(val, oldVal) {
        if (!this.searchButtonFlag) {
          this.tableDataCopy = JSON.parse(JSON.stringify(this.tableData));
        }
      },
      deep: true
    },
  },

搜索，就是对数组元素的匹配，主要利用 filter 函数和 indexOf 来查找即可。

搜索结束，需要重新分页。

// 搜索函数
handleSearchPage() {
  this.searchButtonFlag = true;
  // 搜索字段
  const codeName = this.search.codeName;
  const codeIdentifier = this.search.codeIdentifier.toLowerCase();
  if (codeName !== '' || codeIdentifier !== '') {
    this.tableData = this.tableDataCopy.filter(function(item) {
      return codeName === ''
        ? item.codeIdentifier.toLowerCase().indexOf(codeIdentifier) !== -1
        : codeIdentifier === ''
        ? item.codeName.indexOf(codeName) !== -1
        : item.codeName.indexOf(codeName) !== -1 &&
          item.codeIdentifier.toLowerCase().indexOf(codeIdentifier) !== -1;
    });
    this.handlePagination();
  }
  // 搜索状态皆为空，即调用重置函数
  if (codeName === '' && codeIdentifier === '') {
    this.handleReset();
  }
}

重置，由于存在编辑，需要将搜索得到的部分数据更新到备份数据，后将备份数据给到 tableData，再次重新分页，回到第一页，并清空搜索 input 框。

// 搜索重置
handleReset() {
  this.searchButtonFlag = false;
  this.search.codeName = '';
  this.search.codeIdentifier = '';
  for (let i = 0, len = this.tableData.length; i < len; i++) {
    const numRow = this.tableData[i];
    // 这里的 codeSeqNum 相当于序号，每一行数据都有
    this.tableDataCopy[numRow.codeSeqNum - 1] = numRow;
  }
  this.tableData = JSON.parse(JSON.stringify(this.tableDataCopy));
  this.handlePagination();
}