Vue.js - 使用图像字段搜索排序表

Question

我有一个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调用提供，该调用返回items数组。我需要实现搜索和排序功能。我尝试了几种开箱即用的组件。包括NPM上可用的外包装组件，例如vue-good-table，vue-table-component和grid-component。我面临着两个问题 1.无法显示图像，只返回URL 2.日期无法格式化 - 我正在使用moment.js。

我想在显示图片时按名称，价格和购买者排序。有什么建议吗？

Answer 1

使用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}"/>`
  }))

结果是：