关于Element UI table 顺序拖动方式

关于Element UI table顺序拖动方式，我们需要进行如下步骤：

1. 引入sortablejs和vuedraggable

我们需要先引入sortablejs和vuedraggable这两个库，它们可以帮助我们实现拖拽排序的功能。具体引入方式可以使用CDN或直接下载到本地，这里以使用CDN为例：

<!--引入sortablejs-->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.min.js"></script>
<!--引入vuedraggable-->
<script src="https://cdn.jsdelivr.net/npm/vuedraggable@3.1.0/dist/vuedraggable.min.js"></script>

2. 在table中添加vuedraggable组件

接下来，在我们的table中添加<draggable>标签，将v-model绑定到data中的列表，以便在拖拽排序后，数据能够正确反映。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index)">编辑</el-button>
          <el-button @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <draggable v-model="tableData">
      <el-table :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index)">编辑</el-button>
            <el-button @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </draggable>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'; // 引入sortablejs库
  import draggable from 'vuedraggable'; // 引入vuedraggable库

  export default {
    data() {
      return {
        tableData: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'},
          {name: '王五', age: 22, gender: '男'},
        ]
      };
    },
    components: {
      draggable,
      Sortable,
    },
    // ...
  }
</script>

3. 修复拖拽表格中出现的细节问题

在拖拽表格过程中可能会存在一些细节问题，比如拖拽中会出现冒泡事件的问题，需要将其禁止。修复这些问题我们可以在mounted钩子中使用sortablejs，给表格绑定onStart和onEnd方法。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index)">编辑</el-button>
          <el-button @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <draggable v-model="tableData" handle=".drag-handle" @start="dragStart" @end="dragEnd">
      <el-table :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button class="drag-handle" icon="el-icon-s-operation"></el-button>
            <el-button @click="handleEdit(scope.$index)">编辑</el-button>
            <el-button @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </draggable>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'; // 引入sortablejs库
  import draggable from 'vuedraggable'; // 引入vuedraggable库

  export default {
    data() {
      return {
        tableData: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'},
          {name: '王五', age: 22, gender: '男'},
        ]
      };
    },
    components: {
      draggable,
      Sortable,
    },
    methods: {
      dragStart(event) {
        event.preventDefault();
        event.stopPropagation();
      },
      dragEnd(event) {
        event.preventDefault();
        event.stopPropagation();
        this.$nextTick(() => {
          this.$refs.table.updateColumns();
        });
      },
      handleEdit(index) {
        console.log('edit', index);
      },
      handleDelete(index) {
        console.log('delete', index);
      },
    },
    mounted() {
      this.$nextTick(() => {
        const handle = '.drag-handle';
        const el = document.querySelector('.el-table__body-wrapper tbody');
        const sortable = Sortable.create(el, {
          handle,
          onStart: evt => {
            evt.preventDefault();
            evt.stopPropagation();
          },
          onEnd: evt => {
            evt.preventDefault();
            evt.stopPropagation();
            this.$nextTick(() => {
              this.$refs.table.updateColumns();
            });
          },
        });
      });
    },
  }
</script>

示例说明

下面举两个例子说明：

拖拽排序后，将结果显示在控制台中，代码如下：

<template>
  <div>
    <draggable v-model="tableData">
      <el-table :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
      </el-table>
    </draggable>
    <el-button @click="printData">打印数据</el-button>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';

  export default {
    data() {
      return {
        tableData: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'},
          {name: '王五', age: 22, gender: '男'},
        ]
      };
    },
    components: {
      draggable,
    },
    methods: {
      printData() {
        console.log(this.tableData);
      },
    },
  }
</script>

拖拽排序后，重新渲染表格，代码如下：

<template>
  <div>
    <draggable v-model="tableData" @change="reRenderTable">
      <el-table :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
      </el-table>
    </draggable>
    <el-button @click="printData">打印数据</el-button>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';

  export default {
    data() {
      return {
        tableData: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'},
          {name: '王五', age: 22, gender: '男'},
        ]
      };
    },
    components: {
      draggable,
    },
    methods: {
      reRenderTable() {
        this.$nextTick(() => {
          this.$refs.table.$children.forEach(child => {
            child.$forceUpdate();
          });
        });
      },
      printData() {
        console.log(this.tableData);
      },
    },
  }
</script>

以上就是关于Element UI table顺序拖动方式的详细攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于Element UI table 顺序拖动方式 - Python技术站