vue.js - 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>

数据由返回 items 数组的简单 axios get 调用提供支持。我需要实现搜索和排序功能。我已经尝试了几个开箱即用的组件。包括 NPM 上可用的开箱即用组件，例如 vue-good-table、vue-table-component 和 grid-component。我面临两个问题 1. 图像无法显示，它只返回 URL 2. 日期无法格式化 - 我正在使用 moment.js。

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

标签： vue.jsvuejs2vue-component

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

结果是：