What should I do if the table in AntDesign Vue cannot be edited? (record the solution)-Vue.js-php.cn

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

青灯夜游

Release： 2021-12-20 11:44:01

forward

3221 people have browsed it

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

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

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: &#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 },
  ];

Copy after login

It has to be made responsive!

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 },
  ]);

Copy after login

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

What should I do if the table in AntDesign Vue cannot be edited? (record the solution)
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>

Copy after login

Ant Design Vue’s full version of the editing table sample actually uses ref

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

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