The solution to the problem that tables can not be edited in AntDesign Vue

This article mainly shows you the "AntDesign Vue table can not be edited solutions", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn the "AntDesign Vue tables can not be edited solutions" this article.

Ant Design Vue table cannot edit the solution

A simple requirement: directly edit the contents of the table, such as the sequence number

But it could not be edited all the time. After checking for a long time, we finally found that the problem lies in the array data bound by the table, which is not responsive.

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

It has to be responsive!

Const data = ref ([{key: '1percent, name:' John Brown', age: 32}, {key: '2percent, name:' Jim Green', age: 42}, {key: '3percent, 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 samples, be sure to add ref.

The code of the opening form is attached for your reference.

Import {defineComponent, ref} from 'vue'; const columns = [{title:' serial number', dataIndex: 'key'}, {title:' form name', dataIndex: 'name'}, {title:' sequence number', dataIndex: 'age', slots: {customRender:' age'},] Const data = ref ([{key: '1percent, name:' John Brown', age: 32}, {key: '2percent, name:' Jim Green', age: 42}, {key: '3percent, name:' Joe Black', age: 33},]); export default defineComponent ({name: "FormConfiguration", setup () {return {columns, data,})

The sample editing form of the full version of Ant Design Vue actually uses ref.

The above is all the contents of the article "the solution to the uneditable table in AntDesign Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!