显示栏位管理拖动排序

src/views/components/dialog/fields.vue

@@ -7,19 +7,21 @@
         <p></p>
         <el-checkbox-group v-model="checked" @change="handleCheckedChange">
           <template>
-            <div v-for="(field, index) in filedList" :key="field.value" style="padding:5px 0;">
-              <el-checkbox :label="field.value">
-                <div>
-                  <div>{{ field.name }}</div>
+            <draggable ref="el" v-model="filedList" @end="end">
+              <div v-for="(field, index) in filedList" :key="field.value" style="padding:5px 0;">
+                <el-checkbox :label="field.value">
                   <div>
-                    <el-button type="text" :disabled="index == filedList.length - 1" class="down"> <i
-                        class="el-icon-sort-down" @click.stop.prevent="down(index, field)"></i></el-button>
-                    <el-button type="text" :disabled="index == 0" class="up"><i class="el-icon-sort-up"
-                        @click.stop.prevent="up(index, field)"></i></el-button>
+                    <div style="cursor:move;">{{ field.name }}</div>
+                    <div>
+                      <el-button type="text" :disabled="index == filedList.length - 1" class="down"> <i
+                          class="el-icon-sort-down" @click.stop.prevent="down(index, field)"></i></el-button>
+                      <el-button type="text" :disabled="index == 0" class="up"><i class="el-icon-sort-up"
+                          @click.stop.prevent="up(index, field)"></i></el-button>
+                    </div>
                   </div>
-                </div>
-              </el-checkbox>
-            </div>
+                </el-checkbox>
+              </div>
+            </draggable>
           </template>
 
         </el-checkbox-group>
@@ -33,8 +35,11 @@
 </template>
 
 <script>
+import draggable from 'vuedraggable'
 export default {
-  components: {},
+  components: {
+    draggable
+  },
   props: {
     type: {
       type: String,
@@ -79,7 +84,9 @@ export default {
   mounted() {
   },
   methods: {
-
+    end(val){
+        
+    },
     //打开栏位
     open(data) {
       this.filedList = JSON.parse(JSON.stringify(data))
@@ -108,6 +115,7 @@ export default {
     //提交更改
     submit() {
       for (var i = 0; i < this.filedList.length; i++) {
+        this.filedList[i].order = i
         if (this.checked.includes(this.filedList[i].value)) {
           this.filedList[i].ifHidden = false
         } else {