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

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

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: '1', name: 'John Brown', age: 32 },
    { key: '2', name: 'Jim Green', age: 42 },
    { key: '3', name: 'Joe Black', age: 33 },
  ];

Il faut les rendre réactives !

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

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

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>

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

[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!