VueJS - Element UI : How to enable edit one row el-table-column

Question

I want in a row table can be edited with enable and disable parameters, if edit button action in click then one row table is enable but if save button action in click then disable. and for the default table value is disabled.

It's my code:

<el-table :data="tableData" :key="index" style="width: 100%" stripe>
        <el-table-column label="Name">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" :disabled="isEdit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="Address">
          <template slot-scope="scope">
            <el-input v-model="scope.row.address" :disabled="isEdit"></el-input>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="default" @click="handleSaveRow">Save</el-button>
            <el-button type="primary" @click="handleEditRow">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>

but when I click edit button all rows of columns becomes enabled.

expected: edit click can change one row of table to enable

fiddle: https://jsfiddle.net/dede402/otxahoev/

budgw · Accepted Answer · 2018-05-28 10:02:42Z

2

It's normal as you use the same boolean for all rows. You must find a way to have one boolean per row indicating the edit mode.

Here is a working solution : https://jsfiddle.net/budgw/d3fxw5wq/1/

If you want to separate your data from the UI logic (generally a good idea) you should use a computed property in order to create a list with the edited field.

answered May 28, 2018 at 10:02

budgw

7101 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

dede.brahma Over a year ago

but in case, the data hasn't a field/indicated of edit.

budgw Over a year ago

As I said you can use a computed property that add the field to your data or maintain a second list dedicated to the edit mode and with the same length as your data : jsfiddle.net/budgw/d3fxw5wq/2

dede.brahma Over a year ago

oh great, so if i get data from server with axios, how to set rowState dynamic data from server?

budgw Over a year ago

For instance in your success callback/promise initialize rowState like that : this.rowState = this.tableData.map(row => {edited:false})

dede.brahma Over a year ago

i got an error, here my code methods: { getData() { ... axios({ method: 'GET', url: BASE_API + 'productpricetiers', headers: headers, params: this.params }) .then(response => { this.dataResponse= response.data.data this.getEditState() }) .catch(error => { console.log(error) }) }, getEditState() { this.rowState = this.pricetiersData.map(row => { edited = false }) } }`

|

N. Der · Accepted Answer · 2019-01-28 03:22:00Z

1

@budgw answers is correct - i would like to add to his answer. Rather than disabling the input you can make it a readonly attribute. I think its better that way and also makes your table look cleaner.

<el-input v-model="scope.row.name" :readonly="!scope.row.edited"></el-input>

Visit https://jsfiddle.net/noted/0atjsrnw/4/ for the full code.

answered Jan 28, 2019 at 3:22

N. Der

5274 silver badges18 bronze badges

Collectives™ on Stack Overflow

VueJS - Element UI : How to enable edit one row el-table-column

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related