Element: [Demande de fonctionnalité] Suggestion d'amélioration de fonctionnalité : j'espère que el-table prend en charge le tri par glisser-déposer

+1

Mais actuellement, vous pouvez utiliser https://github.com/RubaXa/Sortable pour le glisser-déposer

import Sortable from 'sortablejs'

let el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
let sortable = Sortable.create(el)

+1 En fait, tant que je peux ajouter l'attribut draggable="true" à la ligne, il semble que je ne puisse pas ajouter d'attributs à la ligne seule.

Certaines entreprises auront cette demande et espèrent ajouter cette fonction

https://github.com/RubaXa/Sortable Après avoir fait glisser, l'ordre du modèle de données ne changera pas, ce qui est un problème

Pour le même problème, faites glisser et déposez la colonne et redimensionnez-la à nouveau. S'il s'agit simplement d'un glisser-déposer, tout va bien, mais il doit être redimensionné à nouveau. Le modèle de données n'a pas changé. Y a-t-il une solution à l'étage ou a-t-elle changé le contrôle?

demander cette fonctionnalité

Même demande

Même demande

Fournissez un exemple combinant Sortable : https://jsfiddle.net/gozhg07a/

En ce qui concerne le modèle de données, Sortable fournit en fait le crochet onEnd . L'exemple ci-dessus consiste à terminer la synchronisation des données dans ce crochet.

@Leopoldthecoder a changé le tableau (this.products) via splice, mais comment résoudre le problème selon lequel l'ordre des lignes du tableau sur la page n'est pas actualisé ?

@Andyliwr J'appelle actuellement les méthodes $destory et $mount de l'instance el-table à redessiner. .
De manière plus approfondie, le redessin peut être réalisé en v-if

@aweiu Je n'arrive toujours pas à le faire, comment y êtes-vous parvenu ?

L'utilisation de sortable.js peut en fait faire glisser des colonnes ou des lignes

    <el-table border max-height="400" :data="tableData" tooltip-effect="dark" size="mini" @row-dblclick="rowDblClick">
      <el-table-column :type='dataTheadList[index] === "selection" ? "selection" : ""' :prop="dataTheadList[index]" show-overflow-tooltip :label='item' v-for="(item, index) in elTheadList" :key="`thead_${index}`">
      </el-table-column>
    </el-table>

  const el = document.querySelectorAll('.el-table__header-wrapper tr')[0]
  this.sortable = Sortable.create(el, {
    filter: '.el-table-column--selection',
    disabled: true, // 禁用
    animation: 180,
    delay: 0,
    setData: function(dataTransfer) {
      dataTransfer.setData('Text', '')
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
    },
    onEnd: evt => {
      // 拖动时sortTable改变了el，
      // 手动转换data
      const oldItem = this.dataTheadList[evt.oldIndex]
      this.dataTheadList.splice(evt.oldIndex, 1)
      this.dataTheadList.splice(evt.newIndex, 0, oldItem)
    }
  })

Vraiment besoin de trier les lignes 😂
Avant triable, le toArray était utilisé pour exporter la commande et le télécharger, elementUI n'est pas pratique pour ajouter dataIdAttr à tr, il ne peut donc pas être exporté directement.

+1

Pour l'utiliser dans el-dialog, vous devez ajouter un setTimeout pour l'utiliser ? Pourquoi ?
jsviolon

peut ensuiteTick

Il est très nécessaire de glisser-déposer, et il est plus flexible d'interagir avec les données en arrière-plan.L'utilisation de sortablejs onMove ne peut pas obtenir les données du nœud avant de faire glisser, pas seulement le code HTML du nœud.

Comment utiliser Sortable.js avec les colonnes de la table Element ?

Voici un exemple de comment glisser-déposer des colonnes avec Sortable.js

https://jsfiddle.net/gozhg07a/295/

Si vous constatez que la vue n'est pas mise à jour de toute façon, essayez d'ajouter une clé de ligne

+1 a vraiment besoin de cette fonctionnalité

@jocabrera
pas colonne. comment utiliser la ligne

@guokangf
par glisser-déposer dans la ligne. https://jsfiddle.net/gozhg07a/416/

Détaché

Quelqu'un a-t-il essayé d'afficher et de masquer les colonnes à l'aide du groupe de cases à cocher et également de glisser-déposer. le groupe de cases à cocher a différentes cases à cocher en fonction du nombre de colonnes et les cases à cocher à bascule afficheront/masqueront la colonne et le glisser-déposer fonctionnera bien ?

Les données de la table n'ont pas besoin d'être redessinées et une clé de ligne est ajoutée. La clé de ligne doit définir un nom de champ unique comme l'ID.

@liub1934 C'est vrai !! utiliser sortable.js

Essayez ceci https://github.com/WakuwakuP/element-ui-el-table-draggable pour el-tabel - drag-n-drop row

Fournissez un exemple combinant Sortable : https://jsfiddle.net/gozhg07a/

En ce qui concerne le modèle de données, Sortable fournit en fait le crochet onEnd . L'exemple ci-dessus consiste à terminer la synchronisation des données dans ce crochet.

Ici, vous utilisez le crochet, mais vous devez toujours lier une clé de ligne unique. Puis-je ne pas lier la clé de ligne ?

Voici un exemple de comment glisser-déposer des colonnes avec Sortable.js

https://jsfiddle.net/gozhg07a/295/
@jocabrera

Salut frère, en utilisant le glisser-déposer dans les colonnes, le tableau va clignoter.
Dans l'attente de votre réponse favorable.
démo : https://codepen.io/xxlion/pen/abzjKMg

Après avoir marché sur n fosses, il est finalement parfaitement résolu. Il ne nécessite aucun redessin. Tant que la clé de ligne correcte est fournie, la vue peut être mise à jour normalement. Il n'y a pas de problème. Il encapsule un composant par lui-même - le git address implique également l'ajout et la suppression de lignes. L'utilisation de v-if et $destroy+$mount n'est pas très bonne. Il est possible d'utiliser la méthode d'effacement avant l'affectation, mais il existe toujours des dangers cachés. Dans des scénarios plus complexes, tels que car lorsqu'il s'agit de remplir un formulaire, il y aura des bogues.

J'ai vu plusieurs schémas de génération de valeur de clé. Tout d'abord, il est impossible d'utiliser l'index. Tout le monde sait que s'il est purement affiché, il peut ne pas y avoir de bug. Une fois la liste modifiée, le bug viendra. Le nombre aléatoire peut être oui, mais il doit être généré puis transmis, et le nombre aléatoire ne peut pas être généré dynamiquement. J'ai également vu un schéma d'utilisation de la carte faible, mais lorsque je l'utilise réellement, j'ai toujours l'erreur de répéter la valeur de la clé lorsqu'il y a une opération d'ajout de lignes.Au final je l'ai fait avec uuid

npm i liste élastique

<ElasticList v-model="value">
  <el-table-column label="a" prop="a"/>
  <el-table-column label="b" prop="b"/>
</ElasticList>