The project requires the front end to tabulate data, add data, edit data, query, reset, and page tables.

Element – UI is used here, and tamplate writing is not described in detail.

The implementation of this article: in the search state, is not supported to add; Search is not supported in edit mode.

Add table data

Add data takes the child component dialog add and passes the data to the parent component after adding.

The whole process is divided into the following steps:

  1. Verify dialog data;
  2. After verification, close dialog and add data to tableDataCopy (used to back up table data, easy to switch between search and normal state)
  3. Push values into tableData;
  4. Retrieves the paging function to re-page and recalculate the total number of pages.
handleSave() {
      / / check
      this.$refs.form.validate((valid, invalidFields) = > {
        if (valid) {
          / / close the dialog
          this.dialogVisible = false;
          // Back up the table data and write it to the listener
          this.tableData.push(JSON.parse(JSON.stringify(this.addDialogForm)));
          / / paging
          this.handlePagination();
          / / reset dialog
          this.addDialogForm = {
            codeSeqNum: ' '.codeName: ' '.codeIdentifier: ' '.details: [{codeKey: ' '.codeValue: ' '}}; }}); }Copy the code

Edit the data

Since the switch between the edit state and normal state is between SPAN and input, and input involves verification, the form nested table is selected and the editable flag bit is used to switch between SPAN and input, which have the same binding value.

<el-table-column label="Identification Name" 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>
Copy the code

Form the paging

Table pagination leverages the El-Pagination tag.

Note that current-page.sync writes the sync keyword,

If the current page is not written, the current-change event is not triggered after the current page is modified

CurrentPage = 1, the current-change event is not triggered, and el-Pagination highlighting remains the same, possibly on another page.

<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>
Copy the code

The initial page

handlePagination() {
  // Go back to the original page and recalculate the total number of pages in the table
  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;
},
Copy the code

This function is triggered when the current page changes

handleCurrentChange(val) {
  // Check whether the current page is the last one
  this.addFormItemRow.rowFormData =
    val === this.totalpage
      ? this.tableData.slice((val - 1) * 20.this.total)
      : this.tableData.slice((val - 1) * 20, val * 20);
},
Copy the code

Because it involves editing, the page cannot be turned in the desired editing state. When the editing state and the search state coexist, it is impossible to determine whether the data edited on the page wants to be saved without pressing the save button.

So I made a judgment before turning the page, to determine whether it is editing.

// The hook function before turning the page
beforeCurrentChange(val) {
  if (this.editable) {
    this.$message({
      message: 'Please save and turn! '.type: 'warning'
    });
    return false;
  } else {
    return true; }},Copy the code

Search and Reset

Because the same table label is used to display the search results and the original data to display and operate, the important step is to back up the original data, which is convenient for continuous multiple searches.

Note: In the search state, is not supported to add; Search is not supported in edit mode.

There are several parts to search for:

  1. Trim the input string, removing Spaces before and after;
  2. The search for the input English string should be case insensitive.
  3. Condition search alone, combination search need to be realized;
  4. Notice multiple searches in a row.
  5. You need to back up data in advance
// Add searchButtonFlag, the search flag bit, which is true in the search state and false otherwise
// Deep monitor tableData, this monitor may be the original data, may be the search results
// Use searchButtonFlag to make a backup of the table when it is not in search state.
// This is done because the tableData is initially empty, the background is given to the data, the tableData changes, the data backup
watch: {
    tableData: {
      // Deep monitor
      handler(val, oldVal) {
        if (!this.searchButtonFlag) {
          this.tableDataCopy = JSON.parse(JSON.stringify(this.tableData)); }},deep: true}},Copy the code

Search is the matching of array elements, mainly using filter function and indexOf to find.

The search is complete and needs to be paginated again.

// Search function
handleSearchPage() {
  this.searchButtonFlag = true;
  // Search the field
  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();
  }
  // The search status is empty, i.e. the reset function is called
  if (codeName === ' ' && codeIdentifier === ' ') {
    this.handleReset(); }}Copy the code

Reset, because there is editing, it is necessary to update part of the data obtained from the search to the backup data, and then the backup data is given to tableData, which is again paginated, back to the first page, and empty the search input box.

// Search for a reset
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 = codeSeqNum
    this.tableDataCopy[numRow.codeSeqNum - 1] = numRow;
  }
  this.tableData = JSON.parse(JSON.stringify(this.tableDataCopy));
  this.handlePagination();
}
Copy the code