What should I do if the table in AntDesign Vue cannot be edited? (record the solution)

What should I do if the table in Ant Design Vue cannot be edited? The following Vue.js column will record and share with you the solution to the problem that the table cannot be edited. I hope it will be helpful to everyone!

Ant Design Vue table cannot be edited Solution

A simple requirement: directly edit the content in the table, such as the sequence number

But it still cannot be edited. After checking for a long time, I finally found that the problem lies in the array data bound to the table, which is not responsive

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

It has to be made responsive!

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 The array data bound to the previous tables does not use ref. If you want to edit the table after applying these examples, you must remember to add ref

Attached is the code of the opening table for your reference

<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 Vue’s full version of the editing table sample actually uses ref

[Related recommendations: "vue.js tutorial"]

The above is the detailed content of What should I do if the table in AntDesign Vue cannot be edited? (record the solution). For more information, please follow other related articles on the PHP Chinese website!