Que dois-je faire si le tableau dans AntDesign Vue ne peut pas être modifié ? (enregistrer la solution)-Voir.js-php.cn

Maison

interface Web

Voir.js

Que dois-je faire si le tableau dans AntDesign Vue ne peut pas être modifié ? (enregistrer la solution)

Dec 20, 2021 am 11:44 AM

ant design ant design vue

Que dois-je faire si le tableau dans Ant Design Vue ne peut pas être modifié ? La colonne Vue.js suivante enregistrera et partagera avec vous la solution au problème selon lequel le tableau ne peut pas être modifié. J'espère qu'elle sera utile à tout le monde !

La solution Ant Design Vue ne peut pas être modifiée

Une exigence simple : modifiez directement le contenu de la table, comme le numéro de séquence

Que dois-je faire si le tableau dans AntDesign Vue ne peut pas être modifié ? (enregistrer la solution)

Mais il ne peut toujours pas être modifié après une longue vérification. une fois, j'ai finalement trouvé le problème. Le problème est que les données du tableau liées à la table ne sont pas réactives

const data = [
    { key: &#39;1&#39;, name: &#39;John Brown&#39;, age: 32 },
    { key: &#39;2&#39;, name: &#39;Jim Green&#39;, age: 42 },
    { key: &#39;3&#39;, name: &#39;Joe Black&#39;, age: 33 },
  ];

Copier après la connexion

Il faut les rendre réactives !

const data = ref([
    { key: &#39;1&#39;, name: &#39;John Brown&#39;, age: 32 },
    { key: &#39;2&#39;, name: &#39;Jim Green&#39;, age: 42 },
    { key: &#39;3&#39;, name: &#39;Joe Black&#39;, age: 33 },
  ]);

Copier après la connexion

Ant Design Vue Les données du tableau liées aux tables précédentes n'utilisent pas ref Si vous souhaitez modifier la table après avoir appliqué ces exemples, assurez-vous d'ajouter ref

Que dois-je faire si le tableau dans AntDesign Vue ne peut pas être modifié ? (enregistrer la solution)
Ci-joint la table d'ouverture Le code est. pour votre référence



<script>
  import { defineComponent, ref } from &#39;vue&#39;;
  const columns = [
    { title: &#39;序号&#39;, dataIndex: &#39;key&#39;},
    { title: &#39;表单名称&#39;, dataIndex: &#39;name&#39; },
    { title: &#39;顺序号&#39;, dataIndex: &#39;age&#39;, slots: { customRender: &#39;age&#39;} },
  ];
  const data = ref([
    { key: &amp;#39;1&amp;#39;, name: &amp;#39;John Brown&amp;#39;, age: 32 },
    { key: &amp;#39;2&amp;#39;, name: &amp;#39;Jim Green&amp;#39;, age: 42 },
    { key: &amp;#39;3&amp;#39;, name: &amp;#39;Joe Black&amp;#39;, age: 33 },
  ]);

  export default defineComponent({
    name: "FormConfiguration",
    setup() {
      return {
        columns,
        data,
      }
    }
  })
</script>

Copier après la connexion

La version complète d'Ant Design Vue de l'exemple de formulaire d'édition utilise en fait ref

Que dois-je faire si le tableau dans AntDesign Vue ne peut pas être modifié ? (enregistrer la solution)

[Recommandations associées : "tutoriel vue.js"]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn