0

I've use Antdv as my data table.

Using this sample code,

View

<a-table 
    :columns="MyHeaders" 
    :data-source="MyData"
    bordered
>
</a-table>

Script

data: () => ({
    MyHeaders:[
        {title:'Name', dataIndex:'Name'}, 
        {title:'Age', dataIndex:'Age'}, 
        {title:'Address', dataIndex:'Address'}
    ],
    MyData:[
        {Name:'John Doe', Age: '25'},
        {Name:'Melissa Cruz', Age: '32'},
        {Name:'Danny Von', Age: '23'}
    ]
})

I have a working table.

Now, I just trying an editable table with antdv like this one or this one.

Is there a way to do it without using or importing some reacts &| lodash component and use only it's standard component like in vuetify (using v-edit-dialog ?)

I have seen this sample documentation without using or importing other property but the output is not quite good or acheive my expectation.

I've try the vuetify edit, but sadly it didn't work. Here's how I attempt.

<a-table 
    :columns="MyHeaders" 
    :data-source="MyData"
    bordered
>
    <template v-slot:item.result="{item, header}">
        <v-edit-dialog
        :key="header.dataIndex"
        :return-value.sync="item[header.dataIndex]"
        >
            {{ item[header.dataIndex] }}
            <template v-slot:input>
            <v-text-field
                v-model="item[header.dataIndex]"
                label="Edit"
                single-line
            ></v-text-field>
            </template>
        </v-edit-dialog>
    </template>
</a-table>

Can someone help me to this one? Or have any idea on how can I do it?

Newbee
  • 702
  • 1
  • 13
  • It's not a good idea to mix 2 different UI libraries. Either use Vuetify or Ant. The link that you posted from their documentation actually contains 2 examples that you can use - one with [editable cells](https://www.antdv.com/components/table#components-table-demo-edit-cell) and another with [editable rows](https://www.antdv.com/components/table#components-table-demo-edit-row). Simply follow them. – IVO GELOV May 06 '23 at 13:36
  • @IVO GELOV. Thank you, but still need an **import** to do an edit isn't it? like this *import { cloneDeep } from 'lodash-es';*. So there's no other way to do an editable row/cell without importing or using other property? – Newbee May 07 '23 at 23:24
  • The table component does not implement inline editing out of the box - you have to implement this yourself. IF you don't want to use Lodash - you can try the new [structuredClone](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone) vanilla JS function. – IVO GELOV May 08 '23 at 12:04

0 Answers0