在 bootstrap-vue table 中的数字列中添加百分号

Question

假设我使用 bootstrap-vue 创建了这个 table。

Table 看起来像这样；

这个table的代码如下；

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger'
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

我想添加百分号作为 Age 列中数字的后缀，但该列将根据数值保持排序 table。如何修改代码来执行此操作？

代码示例摘自下面link； https://bootstrap-vue.org/docs/components/table

我正在使用 vue.js v2.6

Answer 1

如果你可以直接修改你的数据，你可以简单地使用Array.prototype.map:

export default {
  data() {
    return {
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { age: 38, first_name: 'Jami', last_name: 'Carney' }
      ].map(item => (
        item.age = item.age + "%",
        item
      )),
    }
  }
}

Answer 2

最简单的实现方式是使用BootstrapVue中提供的格式化回调函数来添加百分号。接下来，将字段属性 sortByFormatted设置为false，这样就按照未格式化的原始数值进行排序。

相关文档链接； https://bootstrap-vue.org/docs/components/table#formatter-callback https://bootstrap-vue.org/docs/components/table#field-definition-reference

这是需要更改的代码；

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger',
            //Code modification needed. Add the 2 properties below;
            "sortByFormatted": false,
            formatter: value => {
                return (value + '%')
            },          
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

在 bootstrap-vue table 中的数字列中添加百分号

Add percentage sign to column of numbers in bootstrap-vue table

javascript

vue.js

vuejs2

bootstrap-vue