sortable的sort方法对表单等任意节点进行排序

需求描述： 前端代码写的顺序是：用户账号、用户姓名、手机号码，需求想对此进行灵活排序。

解决方案：为每个form-item绑定 data-id属性，值为后台传入的序号，再用sortable.js的sort()方法进行排序。

 

1.HTML代码 

<el-form :model="form" :rules="rules" ref="formAdd" id="formAdd">
              <el-form-item label="用户账号" :label-width="formLabelWidth" prop="userName" :data-id="3">
                <el-input v-model="form.userName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="personalName" :data-id="2">
                <el-input v-model="form.personalName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone" :data-id="1">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
</el-form>

注意：data-id属性，即为sortable 对象 toArrary()方法得到的顺序，这里为[3,2,1]

2. JS代码 

   先引入sortable.js，在节点渲染完毕后，JS代码如下：

         let body =  document.getElementById('formAdd');
        var sortable = Sortable.create(body)
        var order = sortable.toArray();
        console.log(order)//[3,2,1]
        sortable.sort(order.sort()); // apply

用sortable对象的sort()方法即可对节点进行排序。

3.排序前后对比图

排序前：

 排序后