VueJS - Элемент интерфейса: как включить редактирование одной строки el-table-column

Question

Я хочу, чтобы в таблице строк можно было редактировать с включением и отключением параметров, если при нажатии кнопки редактировать действие, тогда включается одна таблица строк, но если при нажатии кнопки сохранить действие, то отключить.и для таблицы по умолчанию значение отключено.

Это мой код:

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

, но когда я нажимаю кнопку редактирования, все строки столбцов становятся активными.

ожидается : изменение клика может изменить одну строку таблицы, чтобы включить

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

Answer 1

@ budgw ответы верны - я хотел бы добавить к его ответу.Вместо отключения ввода вы можете сделать его атрибутом только для чтения.Я думаю, что так будет лучше, и ваш стол будет выглядеть чище.

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

Посетите https://jsfiddle.net/noted/0atjsrnw/4/ для получения полного кода.

Answer 2

Это нормально, так как вы используете одно и то же логическое значение для всех строк.Вы должны найти способ иметь одно логическое значение для каждой строки, указывающее режим редактирования.

Вот рабочее решение: https://jsfiddle.net/budgw/d3fxw5wq/1/

Если вы хотите отделить ваши данные от логики пользовательского интерфейса (обычнохорошая идея) вы должны использовать свойство computed, чтобы создать список с полем edited.