需求描述: 前端代码写的顺序是:用户账号、用户姓名、手机号码,需求想对此进行灵活排序。
解决方案:为每个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.排序前后对比图
排序前:
排序后