Table of contents
foreword
This article records how to introduce vuedraggable to complete the drag-and-drop operation of attribute items, and record the order of drag-and-drop into the table.
Statement of needs
There is a wide table display function in the project. The basic logic is: After the administrator configures the fields to be displayed in the wide table and the data sources of the fields, the user can view the corresponding table data on the display page.
New requirements are put forward for wide table configurable items, which require the display order of freely configurable fields .
demand analysis
Implementation 1: Field rows can be dragged and dropped
This implementation is based on the existing field configuration components, adding a draggable effect, as shown in the figure below:
Because there may be many (dozens) of fields to be selected, and only the checked fields need to be displayed and sorted. So using this drag and drop method will make the field sorting operation very laborious.
Implementation 2: Add a draggable sorting component
A new component is added to read the list of checked fields in real time and generate corresponding draggable labels. Users can change the order of fields by dragging the labels.
A similar effect is as follows:
This solution looks more intuitive and more in line with user operating habits, so the following is based on this solution to complete the requirements.
Realization of requirements
table changes
Because the display side needs to read sorting information, a sorting column needs to be added in the existing field record table. Here, it is assumed that the new sorting column is sort , which is of type int , and the default value is -1 .
front end
Import components
// 为 package.json 中的 dependencies 项新增如下属性
"vuedraggable": "^2.24.3"
// 相关页面引入 vuedraggable
import draggable from 'vuedraggable'
// 在vue中注册组件
components: {
draggable
},
Data structure analysis
-
fieldListAn existing list, storing all field data- The attribute exists in the data item
id, and the record field id - The attribute exists in the data item
name, record the field name - The attribute exists in the data item
isChecked, whether the record field is checked - A new attribute is added
sortto the data item to record the sorting information of the field (the default value is -1, which means not to participate in the sorting)
- The attribute exists in the data item
-
fieldSortListAdded a new list , with the same data structurefieldList, for the sorting component to read information- After checking or unchecking fields,
fieldListthe checked fields in need to be synchronized tofieldSortList - After changing the field order by manual dragging,
fieldSortListthe order information in needs to be synchronized tofieldListthesort
- After checking or unchecking fields,
Synchronize field check information
// 新增方法以更新字段排序列表
updatefieldSortList(){
// 取出被勾选的字段
let checkedItems = this.fieldList.filter((item) => item.isChecked)
// 赋予新增字段（sort值为-1）序号
let unSortItemList = checkedItems.filter(item => item.sort === -1)
if (unSortItemList !== null && unSortItemList !== undefined && unSortItemList.length > 0) {
// 赋值：当前排序列表中的最大值+1（也即排序列表的当前长度-1）
unSortItemList.forEach(unSortItem => unSortItem.sort = checkedItems.length - 1)
}
// 将字段信息按sort值排序，并将其复制至排序列表
this.fieldSortList= JSON.parse(JSON.stringify(checkedItems.sort((a,b)=>a.sort-b.sort)))
}
<!-- 字段的勾选框，每个字段被勾选之后都会调用函数 checkboxChange -->
<el-checkbox @change="checkboxChange(fItem)"></el-checkbox>
// 在 checkboxChange 方法中新增更新操作
checkboxChange (item){
// 省略现有逻辑
console.log(item)
// 勾选/取消勾选时更新字段排序列表
this.updatefieldSortList()
}
// 在 created 中新建如下调用，用于在进入页面时生成可拖拽排序字段
this.updatefieldSortList();
Show sorted list
<!-- 引入自定义标题头，声明排序组件标题（可选） -->
<headTitle headTitle="所选字段排序"></headTitle>
<div class="fieldSortBox">
<!-- 引入拖拽组件，读取排序列表数据 -->
<draggable v-model="fieldSortList" class="dragItemCollection">
<!-- 遍历排序列表数据，使用el-tag包裹数据项名称 -->
<div v-for="item in fieldSortList" :key="item.id" class="dragItem">
<el-tag type="info">{
{ item.name}}</el-tag>
</div>
</draggable>
</div>
// 自定义样式，修饰排序组件内容
.fieldSortBox {
margin-left: 130px;
.dragItemCollection{
display: inline-flex;
flex-wrap: wrap;
.dragItem {
margin:5px 5px 5px 5px !important;
}
}
}
At this point, the page should be able to display the sorting component normally, and the sorting component can also be changed synchronously with the check of the field, as shown in the following figure:
Synchronize drag and drop sorting information
// 新建侦听属性，侦听 fieldSortList
watch:{
fieldSortList: function (newVal, oldVal) {
let sortId = 0
// newVal 中的元素顺序即用户拖拽后看到的元素顺序
newVal.forEach(sortItem=>{
// 找到 fieldList 中对应的字段
let fieldItem = this.fieldList.filter((item) => item.isChecked).find(item=>item.id = sortItem.id);
// 将页面显示顺序设置为元素 sort 字段值
fieldItem.sort = sortId++;
})
}
}
At this point, the field drag and drop configuration on the management side is complete. You can add a print statement before submitting data to the background in the original page submission method, and check whether the order after dragging is updated to the field of the field data item synchronously sort.
The final effect is as follows:
The display side displays in order
Method 1: Backend sorting
When the display end requests data from the backend, the backend sortsearches by fields and returns the results to the front end, and the front end can traverse and display them after receiving them.
QueryWrapper queryWrapper = new QueryWrapper<Field>().orderByAsc("sort");
return fieldService.list(queryWrapper);
Method 2: Front-end sorting
sortWhen the display end requests background data, the background directly checks the data and returns the results to the front end, and the front end displays them in order of values after receiving them .
Summarize
- vuedraggable can complete front-end drag and drop operations, providing a large number of APIs for custom operations
- The user's visual order after dragging is the sort value of the final storage