A, table head drag

1. Download sortablejs

yarn add sortablejs -S

2. Introduce the sortablejs

import Sortable from 'sortablejs';

3. Add the drag-and-drop method in methods and invoke it in Mounted
created(){
    this.columnDrop()
},
methods: {// Enable row drag
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 100.// Animation length
        delay: 0.// How many milliseconds after the sort drag begins before the element starts to move
        filter: '.dragorderNumber'.// Which element is not to be dragged
        chosenClass: 'drag-active'.// The class name to append when selected
        onEnd: (option) = > {
          let oldIndex = option.oldIndex;
          let newIndex = option.newIndex;
          console.log('Old location' + oldIndex, 'New location' + newIndex);
          var clonedItems = this.col.filter(item= > item);
          clonedItems.splice(newIndex, 0, clonedItems.splice(oldIndex, 1) [0]);
          this.col = [];
          this.$nextTick(() = > {
            this.col = clonedItems; }); }}); },// Events in drag
    onMove(env, originalEvent) {
      // Elements that cannot be dragged
      if (originalEvent.target.innerText === 'number') return false}}Copy the code

2, custom table header


<el-table size="small" :data="data" border ref="table" :cell-style="handleCellStyle">
    <el-table-column
  :class-name="'drag' + item.prop"// Define the class namev-for="(item, index) in col"// Loop the header data:key="item.id"
  :width="Item. label === 'serial number'? 73: "'"// The serial number width is fixed:prop="dropCol[index].prop"// The corresponding column data:label="item.label"
  :resizable="false"
>
    <! -- This is a custom header -->
    <template slot="header" slot-scope="scope">
      <span>{{ item.label }}</span>
      <! -- My header filter component -->
      <TableHeaderImg v-if="item.label !== '序号'" @openSortMessage="openSortMessage" />
    </template>
    <! -- Custom columns -->
    <template slot-scope="scope">
        <span>{{ scope.row[item.prop] }}</span>
    </template>
  </el-table-column>
</el-table>

Copy the code

Custom column styles

Product requirements are custom schedules

Use the cell-style method

handleCellStyle({ columnIndex, row, rowIndex }) {
  Row Indicates the index of the columnIndex column of the data object in this row
  if (rowIndex === 0&& columnIndex ! = =0&& columnIndex ! = =1) {
    return {
      height: '28px'.background: 'Linear-gradient (to Right, Rgba (57, 255, 255, 0.37)${row['rate' + (columnIndex - 1)]}%, #FFF 0%)`}; }},Copy the code

Iv. Level 2 Form

It would be more convenient to use the tree-props of Element for a secondary table, but with secondary table drag-and-drop and table content scrolling, the tree is not available. Instead, we use type=”expand” to expand rows

<el-table size="small" :data="data" :cell-style="handleCellStyle" border ref="table"> <! -- Custom secondary table because the default first column drop-down arrow width is set to1Also hide el-table by moving it 1px to the left --><el-table-column type="expand" width="1">
    <template slot-scope="scope">
    <! -- show-header -- add class name -->
      <el-table :data="scope.row.children" :show-header="false" class="child-table">
        <el-table-column
          :class-name="'drag' + item.prop"
          v-for="(item, index) in col"
          :key="index"
          :prop="dropCol[index].prop"
          :width="Item. label === 'serial number'? 73: "'"
          :label="item.label"
          :resizable="false"
        >
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row[item.prop] }}</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-table-column>
</el-table>

Copy the code