Table des matières
avant-propos
Cet article explique comment introduire vuedraggable pour terminer l'opération de glisser-déposer des éléments d'attribut et enregistrer l'ordre de glisser-déposer dans le tableau.
Énoncé des besoins
Il existe une fonction d'affichage de table large dans le projet. La logique de base est la suivante : Après que l'administrateur a configuré les champs à afficher dans la table large et les sources de données des champs, l'utilisateur peut afficher les données de table correspondantes sur la page d'affichage.
De nouvelles exigences sont mises en avant pour les éléments configurables en tableau large, qui nécessitent l'ordre d'affichage des champs librement configurables .
analyse de la demande
Mise en œuvre 1 : les lignes de champ peuvent être glissées et déposées
Cette implémentation est basée sur les composants de configuration de champ existants, en ajoutant un effet déplaçable, comme illustré dans la figure ci-dessous :
Parce qu'il peut y avoir plusieurs (dizaines) de champs à sélectionner, et seuls les champs cochés doivent être affichés et triés. l'utilisation de cette méthode de glisser-déposer rendra l'opération de tri des champs très laborieuse.
Implémentation 2 : ajouter un composant de tri déplaçable
Un nouveau composant est ajouté pour lire la liste des champs cochés en temps réel et générer les libellés déplaçables correspondants. Les utilisateurs peuvent modifier l'ordre des champs en faisant glisser les libellés.
Un effet similaire est le suivant :
cette solution semble plus intuitive et plus conforme aux habitudes de fonctionnement des utilisateurs, ce qui suit est donc basé sur cette solution pour répondre aux exigences.
Réalisation des besoins
changements de tableau
Étant donné que le côté affichage doit lire les informations de tri, une colonne de tri doit être ajoutée dans la table d'enregistrement de champ existante. Ici, on suppose que la nouvelle colonne de tri est sort , qui est de type int , et la valeur par défaut est -1 .
l'extrémité avant
Importer des composants
// 为 package.json 中的 dependencies 项新增如下属性
"vuedraggable": "^2.24.3"
// 相关页面引入 vuedraggable
import draggable from 'vuedraggable'
// 在vue中注册组件
components: {
draggable
},
Analyse de la structure des données
-
fieldListUne liste existante, stockant toutes les données de terrain- L'attribut existe dans l'élément de données
idet l'identifiant du champ d'enregistrement - L'attribut existe dans l'élément de données
name, enregistrez le nom du champ - L'attribut existe dans la donnée
isChecked, que le champ d'enregistrement soit coché - Un nouvel attribut est ajouté
sortà la donnée pour enregistrer les informations de tri du champ (la valeur par défaut est -1, ce qui signifie ne pas participer au tri)
- L'attribut existe dans l'élément de données
-
fieldSortListAjout d'une nouvelle liste , avec la même structure de donnéesfieldList, pour que le composant de tri lise les informations- Après avoir coché ou décoché des champs,
fieldListles champs cochés doivent être synchronisés avecfieldSortList - Après avoir modifié l'ordre des champs par glissement manuel,
fieldSortListles informations d'ordre dans doivent être synchroniséesfieldListavecsort
- Après avoir coché ou décoché des champs,
Synchroniser les informations de vérification sur le terrain
// 新增方法以更新字段排序列表
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();
Afficher la liste triée
<!-- 引入自定义标题头，声明排序组件标题（可选） -->
<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;
}
}
}
À ce stade, la page doit pouvoir afficher le composant de tri normalement, et le composant de tri peut également être modifié de manière synchrone avec la vérification du champ, comme illustré dans la figure suivante :
Synchroniser les informations de tri par glisser-déposer
// 新建侦听属性，侦听 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++;
})
}
}
À ce stade, la configuration du glisser-déposer du champ côté gestion est terminée. Vous pouvez ajouter une instruction d'impression avant de soumettre les données en arrière-plan dans la méthode de soumission de la page d'origine, et vérifier si l'ordre après le glissement est mis à jour dans le champ du élément de données de champ de manière synchrone sort.
L'effet final est le suivant :
Le côté écran s'affiche dans l'ordre
Méthode 1 : Tri backend
Lorsque l'extrémité d'affichage demande des données au backend, le backend sortrecherche par champs et renvoie les résultats au frontal, et le frontal peut les parcourir et les afficher après les avoir reçus.
QueryWrapper queryWrapper = new QueryWrapper<Field>().orderByAsc("sort");
return fieldService.list(queryWrapper);
Méthode 2 : tri frontal
sortLorsque l'extrémité d'affichage demande des données d'arrière-plan, l'arrière-plan vérifie directement les données et renvoie les résultats au frontal, et le frontal les affiche par ordre de valeurs après les avoir reçues .
Résumer
- vuedraggable peut effectuer des opérations de glisser-déposer frontales, fournissant un grand nombre d'API pour des opérations personnalisées
- L'ordre visuel de l'utilisateur après le glissement est la valeur de tri du stockage final