elmentUI + Sortable 实现拖拽排序表格

elmentUI + Sortable 实现拖拽排序表格

直接上代码：

<template>
  <div>
    <el-dialog>
        <el-form>
          <el-form-item label="显示参数">
            <el-table :data="productAttribute" row-key="id" :border="true" style="width: 100%">
              <el-table-column prop="name" label="参数"></el-table-column>
              <el-table-column label="显示" width="50px">
                <template slot-scope="scope">
                  <i
                    v-if="scope.row.is_used"
                    @click="attributeShow(scope.row, 'hide')"
                    class="el-icon-check"
                  ></i>
                  <i v-else @click="attributeShow(scope.row, 'show')" class="el-icon-close"></i>
                </template>
              </el-table-column>
              <el-table-column label="排序" width="50px">
                <template slot-scope="scope">
                  <span v-if="scope.$index === 0" @click="attributeSort(scope.row, 'bottom')">
                    <i class="el-icon-bottom"></i>
                  </span>
                  <span v-else-if="scope.$index === productAttribute.length - 1">
                    <i class="el-icon-top" @click="attributeSort(scope.row, 'top')"></i>
                  </span>
                  <span v-else>
                    <i class="el-icon-top" @click="attributeSort(scope.row, 'top')"></i>
                    <i class="el-icon-bottom" @click="attributeSort(scope.row, 'bottom')"></i>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from "sortablejs";

export default {
  name: "product-dialog",
  data() {
    return {
      productAttribute: [
        {
          name: "课程名称",
          is_used: true,
          id: 1
        },
        {
          name: "课程概述",
          is_used: false,
          id: 2
        },
        {
          name: "价格",
          is_used: true,
          id: 3
        }
      ],
    };
  },
  methods: {
    ...
    createSortTable () {
          const that = this;
          const table = document.querySelector(".el-table__body-wrapper tbody");
          Sortable.create(table, {
            animation: 150,
            onEnd({ newIndex, oldIndex }) {
              let length = that.productAttribute.length;
              if (length > 0) {
                const currRow = that.productAttribute.splice(oldIndex, 1)[0];
                that.productAttribute.splice(newIndex, 0, currRow);
                let postSort = that.productAttribute.map(x => x.id);
              }
            }
          });
    },
    attributeShow(row, type) {
      if (type === "show") {
        row.is_used = true;
      } else if (type === "hide") {
        row.is_used = false;
      }
    },
    attributeSort(row, type) {
      let index = this.productAttribute.indexOf(row);
      let currRow;
      if (type === "top") {
        currRow = this.productAttribute.splice(index, 1)[0];
        this.productAttribute.splice(index - 1, 0, currRow);
      } else if (type === "bottom") {
        currRow = this.productAttribute.splice(index, 1)[0];
        this.productAttribute.splice(index + 1, 0, currRow);
      }
    }
    ...
  }
};
</script>
<style>
.el-icon-check,
.el-icon-close,
.el-icon-bottom,
.el-icon-top {
  cursor: pointer;
}
.el-icon-check:hover,
.el-icon-close:hover,
.el-icon-bottom:hover,
.el-icon-top:hover {
  color: #000;
}
</style>

最终效果如下图：