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

【问题标题】：Vue.js - search sort table with an image fieldVue.js - 使用图像字段搜索排序表
【发布时间】：2018-10-14 12:34:39
【问题描述】：

我有一个 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。

我想在显示图像时按名称、价格和购买日期进行排序。有什么建议吗？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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}"/>`
  }))

结果是：

【讨论】：

我无法定义如上所示的数组，因为我的 axios get 调用返回了 items 数组。我尝试映射 rows: items 以及 rows: this.time 但这不起作用。虽然代码编译得很好，但它不会在浏览器中呈现，我看到 Vue warn]: Error in data(): "TypeError: items is undefined"
为时已晚 - 我在 5 日编写了自定义代码以使其工作。卸载了好表。