【vue开发】基于vue+element-ui框架的表格拖拽排序demo

表格

          <el-table
            :data="tableData.filter(data => !fieldKeyWords || data.description.includes(fieldKeyWords))"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            style="width: 100%; position: absolute"
            row-key="fldId"
            height="100%"
          >
            <el-table-column prop="" label="操作" min-width="135">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-edit" class="op-btn" @click="editField(scope.row)"
                  >编辑
                </el-button>
                <el-button
                  icon="el-icon-delete"
                  type="text"
                  class="btn-delete btn-el-no-padding op-btn"
                  show-overflow-tooltip
                  @click="removeField(scope.row)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="isShow" label="是否展示">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isShow" @change="toggleShow(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="fldId" label="字段ID" show-overflow-tooltip width="200" />
            <el-table-column prop="description" label="字段名称" show-overflow-tooltip width="160" />
            <el-table-column prop="fldType" label="字段类型" width="110" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ transformFldType(scope.row.fldType) }}
              </template>
            </el-table-column>
            <el-table-column prop="fldDataType" label="数据类型" show-overflow-tooltip width="110">
              <template slot-scope="scope">
                {{ transformFldDataType(scope.row.fldDataType) }}
              </template>
            </el-table-column>
            <el-table-column prop="fldDataLength" label="字段长度" show-overflow-tooltip align="center" width="80">
              <template slot-scope="scope">
                {{
                  scope.row.fldDataPrecision
                    ? `${scope.row.fldDataLength},${scope.row.fldDataPrecision}`
                    : scope.row.fldDataLength
                }}
              </template>
            </el-table-column>
          </el-table>

js排序

  // 行拖拽
  rowDrop() {
    // 此时找到的元素是要拖拽元素的父容器
    const tbody: any = document.querySelector('.el-table__body-wrapper tbody')
    const _this = this
    Sortable.create(tbody, {
      //  指定父元素下可被拖拽的子元素
      draggable: '.el-table__row',
      onEnd({ newIndex, oldIndex }: any) {
        const currRow = _this.tableData.splice(oldIndex, 1)[0]
        _this.tableData.splice(newIndex, 0, currRow)
        _this.handleFieldSort(_this.tableData)
      }
    })
  }