Vue.js - таблица сортировки поиска с полем изображения - PullRequest
Новая
       10

Vue.js - таблица сортировки поиска с полем изображения

0 голосов
/ 04 мая 2018

У меня есть компонент / представление Vue.js, которое показывает данные следующим образом: 

<tbody v-for="item in items">
 <tr>
 <td width="15%"><img :src="item.image"></td>
 <td width="50%">{{item.name}}</td>
 <td>{{item.purchasedate | moment(" MMMM Do YYYY") }}</td> 
 <td>${{item.price}}</td> 
 <td><a href="someurl">Item destination link</a></td> 
 </tr>
 </tobdy>

Данные приводятся в действие простым вызовом axios get, который возвращает массив элементов. Мне нужно реализовать функцию поиска и сортировки. Я попробовал несколько компонентов из коробки. Включая готовые компоненты, доступные на NPM, например vue-good-table, vue-table-component и grid-component. Есть две проблемы, с которыми я сталкиваюсь 1. Изображение не может быть отображено, и оно только возвращает URL 2. Дата не может быть отформатирована - для этого я использую moment.js.

Я хотел бы отсортировать по имени, цене и приобретению при отображении изображения. Есть предложения?

1 Ответ

0 голосов
/ 04 мая 2018

с помощью vue-good-table вы можете установить опцию столбца следующим образом: 

  columns: [
    {
      label: 'photo',
      field: 'photo',
      html: true
    },
    {
      label: 'Name',
      field: 'name',
      filterOptions: {
        enabled: true,
      },
    },
    {
      label: 'Age',
      field: 'age',
      type: 'number',
    },
    {
      label: 'Created On',
      field: 'createdAt',
      formatFn: v=>moment(v).format(" MMMM Do YYYY")
    },
    {
      label: 'Percent',
      field: 'score',
      type: 'percentage',
    },
  ],

и такие данные: 

  rows: [
    { id:1,photo:"/static/logo.png", name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
    { id:2,photo:"/static/logo.png", name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
    { id:3,photo:"/static/logo.png", name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
    { id:4,photo:"/static/logo.png", name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
    { id:5,photo:"/static/logo.png", name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
    { id:6,photo:"/static/logo.png", name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
    { id:7,photo:"/static/logo.png", name:"Jane", age: 24, createdAt: '20111031' },
    { id:8,photo:"/static/logo.png", name:"Susan", age: 16, createdAt: '2013-10-31', score: 0.03343 },
  ].map(o=>({
    ...o,
    photo:`<img width="80" height="80" src="${o.photo}"/>`
  }))

и результат: enter image description here

...