el-checkbox-group 拖拽排序代码示例

下面是一个简单的示例代码，演示了如何使用 vue-draggable 实现 el-checkbox-group 的拖拽排序功能：

<template>
  <div>
    <draggable v-model="checkedList" :options="{handle: '.drag-handle'}">
      <div v-for="(item, index) in checkedList" :key="item">
        <el-checkbox :label="item">
          <span class="drag-handle">☰</span> {{ item }}
        </el-checkbox>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      checkedList: ['选项1', '选项2', '选项3', '选项4']
    };
  }
};
</script>

在上面的代码中，我们使用了 vue-draggable 组件来包裹 el-checkbox 组件，并设置了 handle 属性为 '.drag-handle'，这样就可以通过拖拽 handle 来实现拖拽排序。同时，我们将 el-checkbox 的 label 属性绑定到了 checkedList 数组中，通过拖拽排序改变 checkedList 数组的顺序，即可实现 el-checkbox-group 的拖拽排序功能。