Question

我已经构建了一个Vue.js组件。我有一个vue-good-table，它从服务器获取数据。我需要格式化输出数据。现在数据附带数字。例如：它显示数字1作为值。代替“ 1”，它必须是ITEM1，对于2-ITEM2，依此类推。

<vue-good-table
  :columns="columns"
  :rows="formattedItems"
  :paginate="true"
  :lineNumbers="true">
</vue-good-table>

<script type="text/javascript">
  import config from '../main.js'
  import moment from 'moment'

  export default {

    components: {

    },

    data(){
      return {
        items: [],
        columns: [
          {
            label: 'Number',
            field: 'number',
            type: 'String',
            filterable: true,
            placeholder: 'Number'
          },
          {
            label: 'Name',
            field: 'name',
            type: 'String',
            filterable: true,
            placeholder: 'Name'
          },
          {
            label: 'Validity Date',
            field: 'validitydate',
            type: 'String',
            filterable: true,
            placeholder: 'dd/mm/yyyy'
          },
          {
            label: 'Authority',
            field: 'authority',
            type: 'String',
            filterable: true,
            placeholder: 'Authority'
          },
          {
            label: 'Status',
            field: 'status',
            type: 'String',
            filterable: true,
            placeholder: 'Status'
          },
          {
            label: 'Structure',
            field: 'structure',
            type: 'String',
            filterable: true,
            placeholder: 'Structure'
          },
          {
            label: 'Type',
            field: 'type',
            type: 'String',
            filterable: true,
            placeholder: 'Type'
          },
          {
            label: 'National',
            field: 'isnational',
            type: 'String',
            filterable: true,
            placeholder: 'National'
          },
        ],

        json_meta: [
          [{
            "key": "charset",
            "value": "utf-8"
          }]
        ]
      }
    },

    methods: {

    computed: {
      formattedItems () {
        if (!this.items || this.items.length === 0) return []
        return this.items.map(item => {
            return {
              ...item,
            validitydate: item.validitydate === null ? null : 
              moment(item.validitydate).format('DD/MM/YYYY')
      }
      })
      }
    }

  }
</script>

我需要针对“权限”，“状态”，“结构”，“类型”和“国家”列进行操作。对于授权：1-ITEM1，2-ITEM2，3-ITEM3 对于状态：1-状态1，2-状态2，3-状态3 依此类推。

更新： 我想知道使用Map来实现它。但是，我不太确定如何。

Answer 1

vue-good-table支持称为formatFn的列属性，您可以在其中格式化数据，然后将数据显示在列上。

// in your columns
{
  label: 'Authority',
  field: 'authority',
  type: 'String',
  filterable: true,
  placeholder: 'Authority',
  formatFn: this.formatAuthority,
}

// in your methods
methods: {
  formatAuthority(value) {
    return `ITEM ${value}`;
  }
}

您可以在此处查看文档： https://xaksis.github.io/vue-good-table/guide/configuration/column-options.html#formatfn

在Vue Good Table中格式化输出行数据

1 个答案: