在bootstrap-vue表中的數字列中添加百分號

假設我使用bootstrap-vue.

表是這樣的；

該表的代碼如下；

<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但該列將根據數字值保持可排序。如何修改代碼來做到這一點？

代碼示例摘自以下鏈接； https://bootstrap-vue.org/docs/components/table

我正在使用 vue.js v2.6

uj5u.com熱心網友回復：

如果您可以直接修改資料，則可以簡單地使用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
      )),
    }
  }
}

uj5u.com熱心網友回復：

直接的實作是使用 BootstrapVue 中提供的格式化回呼函式來添加百分號。接下來，將 field 屬性設定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>

標籤：javascript Vue.js Vuejs2 引导程序

上一篇：如何從vue中的vuex操作重定向到登錄頁面

下一篇：為什么Vue看不到資料變化？