el-table implements drag-and-drop mobile columns and dynamic sorting fields


*,°*:.☆( ̄▽ ̄)/$:*.°*


Welcome to the blog post first seen on the front end. This article mainly explains how to use a case el-table in the work to realize drag-and-drop mobile columns and dynamics Sort field


? Personal homepage: First look at the front end


If you like it, you can pay attention to it. Don’t get lost in the next update

Article directory

  • foreword
  • 1. el-table implements drag-and-drop mobile columns
        • 1. Call the interface to get the data table data
        • 2. Refer to the data to be adjusted on the interface table field mock page
        • 3. Introduce the field order h of the mock and drag and drop related third-party tables
        • 4. el-table rendering related data
        • 5. el-table drag and drop implementation
  • Two, el-table table dynamic sorting field
        • 1. Realize a table with control fields according to the dynamic header of the mock
        • 2. Related methods
        • 3. The method of moving down the form field
  • Summarize

Foreword

  1. background
    The company gave me a requirement that I needed to drag and drop forms and customize form fields, so I started surfing the Internet, so I encapsulated a set of methods and shared them with everyone. If you don’t understand, you can private message me or post them in the comment area
    el-table comes with support for sorting by column, but when users need to drag and drop to sort by themselves, the existing components cannot satisfy.
    It’s time for Amway’s complete js library, SortableJS
    Simple and easy to use, there are simple list sorting in the official document, multiple lists dragging each other, cloning, sorting and other demos, now only record the usage of simple sorting
    SortableJS official website

1. el-table implements draggable and mobile columns

The plugin Sortable.js needs to be installed

npm i sortablejs --save
or
yarn add sortablejs --save

1. Call the interface to get data table data

this. $axios
        .post("personnel/list", formData)
        .then((response) => {<!-- -->
          // console. log(response);
          this.dynamicTableData = response.data;
        }))

interface data

2. Refer to the data to be adjusted on the interface form field mock page

Note that these data props correspond to the fields of the interface, and the order of the following data will control the page display order
Dynamic header data

export default [
  {<!-- -->
    disabled: true,
    isCheck: true,
    fixed: true,
    width: "100px",
    label: "Name",
    prop: "name"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "180px",
    label: "unit",
    prop: "unitName"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "Department",
    prop: "departmentName"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "Gender",
    prop: "sex"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "Birth Date",
    prop: "birthday"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "Hometown",
    prop: "places"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "Participate in working hours",
    prop: "workTime"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "Administrative Position",
    prop: "duty"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "Administrative duty hours",
    prop: "dutyTime"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "Administrative Rank",
    prop: "jobGrade"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "administrative rank time",
    prop: "jobGradeTime"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "110px",
    label: "level",
    prop: "rank"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "Level time",
    prop: "rankTime"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "Legal Position",
    prop: "legislation"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "Legal Duty Hours",
    prop: "legislationTime"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "full-time education",
    prop: "fullTimeEducation"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "Full-time degree",
    prop: "fullTimeDegree"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "Full-time major",
    prop: "fullTimeMajor"
  },
  {<!-- -->
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "Political Aspect",
    prop: "politicsStatus"
  },
];

3. Introduce mock field order h and drag and drop related third-party tables

import Sortable from "sortablejs";
// Introduce the Sortable table drag-and-drop plugin
import schemas from "./DynamicTableLabels";
// import mock data

4.el-table rendering related data

  • be careful:
  • The data in the el-table component is bound to the interface field
  • el-table-column renders props, labels, fields and interface data by traversing the mock data, so that the rendering can be completed
  • Checkboxes and ordinals are fixed
 <el-table
      v-if="isShowSchemaTable"
      :data="tableData.list"
      :height="getTableHeight"
      style="margin-bottom: 5px"
      ref="schema-table"
      class="ELtable"
      size="small"
      stripes
      :key="tableKey"
      :row-key="
        (row) => {
          return row.id;
        }
      "
      id="outTable"
      @select="handleSelect"
      @select-all="handleSelectAll"
      @selection-change="updateSelection"
    >
      <!-- checkbox -->
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column
        label="serial number"
        type="index"
        align="center"
        fixed
        width="50px"
      ></el-table-column>
        <el-table-column
        v-for="(item, index) in schemas"
        v-if="item.isCheck & amp; & amp; item.prop !== 'remark'"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        align="center"
      >
        <template slot-scope="sc">
          <div>
            <span v-if="dateFileds. includes(item. prop)">
              {<!-- -->{ getFormatDate(sc.row[item.prop]) }}
            </span>
            <span v-else>{<!-- -->{ sc.row[item.prop] }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

5.el-table drag and drop implementation

Start calling the column drag method when mounting

 async mounted() {<!-- -->
    //Form drag method
    this. columnDrop();
  },

Related method encapsulation

 /**
     * Column dragging
     */
    columnDrop() {<!-- -->
      const _this = this;
      // console.log("data", this.schemas);
      const wrapperTr = document. querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {<!-- -->
        animation: 180,
        delay: 0,
        onEnd: (evt) => {<!-- -->
          const empty = 2;
          // Skip the number of displayed columns, as we used a multi-select box at the beginning, h and serial number
          const oldItem = this.schemas[evt.oldIndex - empty];
          this.schemas.splice(evt.oldIndex - empty, 1);
          this.schemas.splice(evt.newIndex - empty, 0, oldItem);
          _this. reDrawTable();
          // redraw after each drag
        },
      });
    },
    /**
     * trigger table redraw
     */
    reDrawTable() {<!-- -->
      this.tableKey = Math.random();
      this.$nextTick(() => {<!-- -->
        // this. rowDrop();
        this. columnDrop();
      });
    },

2. el-table table dynamic sort field

1. Realize a table with control fields according to the dynamic header of the mock

  • Notice
    • el-table is mock data
    • Sorted up and down incoming click event incoming index
 <el-dialog
      title="Custom table sort order"
      :visible.sync="dialogVisibleShow"
      append-to-body
      :close-on-click-modal="false"
      width="500px"
      border
      id="uptishi"
    >
      <p style="font-size: 14px; color: red; margin: 0px 0 5px 15px">
        <i style="font-size: 16px" class="el-icon-warning"></i>
        Reminder: The modified result view settings will take effect immediately
      </p>
      <el-table id="uptable" :data="schemas" ref="curtable" height="500">
        <el-table-column type="index" label="serial number" width="80"></el-table-column>
        <el-table-column prop="label" align="cneter" label="column name" width="150">
        </el-table-column>
        <el-table-column label="sort" min-width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="padding: 0"
              :disabled="scope. $index == 0"
              @click="moveUpward(scope. row, scope. $index)"
              >Move Up</el-button
            >
            <el-button
              type="text"
              style="padding: 0"
              :disabled="scope.$index + 1 == schemas.length"
              @click="moveDown(scope. row, scope. $index)"
              >Move down</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

2. Related methods

 /**
     * Form field move up method
     */
    moveUpward(row, index) {<!-- -->
      // schemas column data
      if (index > 0) {<!-- -->
        let upData = this.schemas[index - 1];
        this.schemas.splice(index - 1, 1);
        this.schemas.splice(index, 0, upData);
        console.log("Move successfully");
      } else {<!-- -->
        console.log("The first piece of data");
        this.$message({<!-- -->
          message: "Already the first item, failed to move up",
          type: "error",
        });
      }
    },

3. Form field down method

 /**
     * Form field down method
     */
    moveDown(row, index) {<!-- -->
      if (index + 1 == this.schemas.length) {<!-- -->
        this.$message({<!-- -->
          message: "It is already the last item, the down move failed",
          type: "error",
        });
      } else {<!-- -->
        let downData = this.schemas[index + 1];
        this.schemas.splice(index + 1, 1);
        this.schemas.splice(index, 0, downData);
      }
    },

Rendering image:

Summary

If this [article] is helpful to you, I hope you can give me a thumbs up, creation is not easy, if you have friends who are interested in front-end or python, please pay more attention, we Let’s explore and work together! ! !
? Personal homepage: First look at the front end