CODEWITHSUNDEEP
vuejs2contenteditableelement-ui
dede.brahma
dede.brahma

Reputation: 329

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

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/

Upvotes: 0

Views: 19453

Answers (2)

N. Der
N. Der

Reputation: 527

@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.

Upvotes: 1

budgw
budgw

Reputation: 710

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.

Upvotes: 2

Related Questions