Как мне получить доступ к значениям в определенной строке таблицы в Vue.js с помощью el-table (Element UI?

В настоящее время я работаю над созданием приложения на Vue.js с использованием Element-UI, и я новичок в использовании Element-UI. Я создал таблицу с помощью el-table. Мне удалось добавить содержимое в таблицу. Теперь у меня есть кнопка удаления в каждой строке таблицы. После того, как я нажму кнопку «Удалить», он должен успешно удалить строку (то есть сделать запрос DELETE или HTTP-запрос к серверу и удалить этого пользователя из базы данных). Для этого мне нужно получить доступ к содержимому или только к имени пользователя в этой конкретной строке. Как мне это сделать?

Найдите мой HTML-код (удалить) ниже:

HTML-часть Vue.js:

      <el-table>
             <el-table-column
                  width="75"
                  prop="name">
                  <template slot-scope="scope">
<!--Adding the delete button -->
                    <el-button
                      size="mini"
                      type="danger" 
                      icon="el-icon-delete" circle
                      @click="users_delete_visible = true"
                      >
                    </el-button>
                  </template>
             </el-table-column>

        </el-table>

Также есть столбец для имени пользователя в таблице, созданной с помощью el-table. Как мне изменить приведенный выше html-код, чтобы получить доступ к имени в строке при нажатии на кнопку удаления?

Любая помощь будет очень признательна. Я застрял на этом довольно долго.

Спасибо


html vue.js vuejs2 html-table element-ui
person skate_23    schedule 17.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

<el-button
    size="mini"
    type="danger" 
    icon="el-icon-delete" circle
    @click="deleteUser(scope.row)"
>
</el-button>

Затем в вашей функции

methods: {
    deleteUser(row) {
      let username = row.username; // Assuming your object has a username property 
      console.log('Deleting user ' + username);
    }
  }

Рабочий пример

person Raja    schedule 17.07.2020
comment
Спасибо. Это действительно хорошо сработало. Ценить это. :) - person skate_23; 18.07.2020
comment
Пожалуйста. Отметьте вопрос как решенный. - person Raja; 18.07.2020
comment
У меня есть еще одна проблема: я хочу отображать диалоговое окно вместо предупреждения при нажатии на кнопку удаления. В диалоговом окне отображается сообщение Удаление пользователя ‹username›, а затем после нажатия кнопки «Подтвердить» в диалоговом окне этого пользователя следует удалить. Поэтому, когда я пытаюсь сделать это с помощью вызова функции delete_user (scope.row) после нажатия кнопки Confrim, он удаляет имя пользователя из последней строки в таблице, а не из той строки, которая должна была быть удалена. Имя пользователя берется из последней строки. Пожалуйста, не могли бы помочь в этом? Я был бы очень признателен. - person skate_23; 18.07.2020