Как добавить изображение в таблицу (используя el-table, el-table-column), ie, используя ui-element в Vue. js? - PullRequest
Новая
       31

Как добавить изображение в таблицу (используя el-table, el-table-column), ie, используя ui-element в Vue. js?

0 голосов
/ 09 июля 2020

Я новичок в Vue. js, и мне удалось построить простую таблицу с помощью элемента ui. Элемент ui, используемый для построения таблицы, - это el-table, и для него отображены различные столбцы с использованием el-table-column и prop (пожалуйста, найдите код ниже). Теперь я хочу отображать изображения / аватары / миниатюры в моей таблице (ie, один из столбцов в таблице должен быть заполнен изображениями). Я не знаю, как вставлять изображения в таблицы, поскольку я использую prop для заполнения таблицы данными. Мой код таблицы выглядит следующим образом:

Часть HTML в Vuejs: 

<!--Table-->
    
          <el-table :data="posts"
                ref="Table"
                stripe
                style="width: 100%;">

                <el-table-column min-width="50" prop="name"
                   label="Username">
                </el-table-column>

                <el-table-column min-width="50" prop="count_followers"
                   label="Followers">
                </el-table-column>

                <el-table-column min-width="55"  prop="display_pic_url"
                   label="Display Pic">
                </el-table-column> -->
           </el-table>

Я использовал данные с помощью ax ios и сохранил информацию в массиве с именем сообщений . Я использовал приведенный выше массив сообщений в коде html, то есть: data = "posts". Я отобразил данные на веб-странице, используя el-table-column и prop. Третий столбец выше представляет отображаемое изображение, prop = "display_pic_url" представляет URL-адреса изображения профиля. Но я не хочу печатать эти данные (ie, URL-адреса отображаемого изображения) в таблице, вместо этого я хочу отображать изображение профиля, размещенное на URL-адресе. Как мне этого добиться? Как мне отображать изображение профиля в каждой строке вместо того, чтобы просто печатать URL-адрес в каждой строке?

Я показал таблицу, созданную мной ниже.

введите описание изображения здесь

Пожалуйста, взгляните на код и предложите изменения в коде для отображения изображения профиля.

Я буду очень признателен за любую помощь, которую смогу получить.

Спасибо.

1 Ответ

1 голос
/ 09 июля 2020

Вы можете использовать slot-scope: 

<el-table-column min-width="55"  prop="display_pic_url" label="Display Pic">
  <template slot-scope="scope">
      <img :src="scope.row.display_pic_url"/>
  </template>
</el-table-column>
...