VueJS - Element UI: как разрешить редактирование одной строки el-table-column

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

Это мой код:

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

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

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

скрипка: https://jsfiddle.net/dede402/otxahoev/


vuejs2 contenteditable element-ui
person dede.brahma    schedule 28.05.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

person budgw    schedule 28.05.2018
comment
но в случае, если в данных нет поля / указано редактирование. - person dede.brahma; 28.05.2018
comment
Как я уже сказал, вы можете использовать вычисляемое свойство, которое добавляет поле к вашим данным или поддерживает второй список, предназначенный для режима редактирования и имеющий ту же длину, что и ваши данные: jsfiddle.net/budgw/d3fxw5wq/2 - person budgw; 28.05.2018
comment
о, отлично, так что если я получаю данные с сервера с помощью axios, как установить динамические данные rowState с сервера? - person dede.brahma; 28.05.2018
comment
Например, в вашем успешном обратном вызове / обещании инициализируйте rowState следующим образом: this.rowState = this.tableData.map(row => {edited:false}) - person budgw; 28.05.2018
comment
у меня ошибка, вот мои методы кода: {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})}}` - person dede.brahma; 28.05.2018
comment
извините, я сделал ошибку, это: this.tableData.map(row => { return {edited:false}}) - person budgw; 28.05.2018
comment
все еще ошибка, я использую карту в вычислении. я обновил свою скрипку jsfiddle.net/dede402/otxahoev/5 - person dede.brahma; 28.05.2018
comment
Я не понимаю, где вы используете getEditState. Взгляните на vuejs.org/v2/guide/computed.html или просто не не использовать вычисляемое свойство. Кажется, ваша скрипка не работает для меня, но я думаю, что если вам просто нужно инициализировать this.rowState juste после того, как вы получите данные в своем this.rowState = this.getServerData.map(row => { return { edited: false } }) - person budgw; 28.05.2018
comment
я действительно так благодарю вас мастер, вы так терпеливы с новичком, как я - person dede.brahma; 28.05.2018

arrow_upward
1
arrow_downward

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

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

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

person N. Der    schedule 28.01.2019