Was soll ich tun, wenn die Tabelle in AntDesign Vue nicht bearbeitet werden kann? (Notieren Sie die Lösung)

Was soll ich tun, wenn die Tabelle in Ant Design Vue nicht bearbeitet werden kann? Die folgende Vue.js-Spalte wird die Lösung für das Problem, dass die Tabelle nicht bearbeitet werden kann, aufzeichnen und mit Ihnen teilen. Ich hoffe, dass sie für alle hilfreich ist!

Ant Design Vue-Tabelle kann nicht bearbeitet werden. Lösung:

Eine einfache Anforderung: Bearbeiten Sie den Inhalt in der Tabelle direkt, z. B. die Sequenznummer.

Aber nach langer Überprüfung kann er immer noch nicht bearbeitet werden Mit der Zeit habe ich endlich das Problem gefunden. Das Problem besteht darin, dass die an die Tabelle gebundenen Array-Daten nicht reagieren

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

Sie müssen reaktionsfähig gemacht werden!

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 Die an die vorherigen Tabellen gebundenen Array-Daten verwenden nicht ref Wenn Sie die Tabelle nach der Anwendung dieser Beispiele bearbeiten möchten, fügen Sie unbedingt ref hinzu

Im Anhang finden Sie die Eröffnungstabelle. Der Code lautet Als Referenz

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

Ant Design Vues Vollversion des Bearbeitungsformularbeispiels verwendet tatsächlich ref

[Verwandte Empfehlungen: „vue.js Tutorial“]

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn die Tabelle in AntDesign Vue nicht bearbeitet werden kann? (Notieren Sie die Lösung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!