基于draggable和element的可拖拽多选框

首先上效果图。

---

下面上代码。

安装、注册draggable组件就不赘述了。

页面布局部分

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="checkedLists" @change="handleCheckedListChange">
        <draggable>
          <transition-group>
            <el-checkbox v-for="item in listData" :label="item.sign" :key="item.sign" class="drag-item" border>
              <span>{{item.name}}</span>
            </el-checkbox>
          </transition-group>
        </draggable>
      </el-checkbox-group>

TIPS：相比于之前的多选框，就多了个在el-checkbox-group中加入draggable组件的使用。这里的调用比较简单，只是展示了最基本的用法，未使用其配置的各种属性，事件等。需要特别注意的是，<transition-group>组件里一定要放入循环结构，否则会报错。

数据部分

data() {
    return {
      listData: [
        { name: "1号", sign: 111 },
        { name: "2号", sign: 222 },
        { name: "3号", sign: 333 },
        { name: "4号", sign: 444 },
      ],
      checkedLists: [],
      checkAll: false,
      isIndeterminate: false,
    };
  },

函数部分

handleCheckAllChange(val) {
      this.checkedLists = val
        ? this.listData.map((item) => {
            return item.sign;
          })
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedListChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.listData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.listData.length;
    },

---

大概总结

相对于上篇Element使用多选框组及全选按钮，几乎一模一样。主要就是几个坑，注意下就可以了。