主页 / 问题 / 1131330
Accepted
Dip
Asked:2020-05-26 00:52:48 +0800 CST2020-05-26 00:52:48 +0800 CST

如何在 vue 表中更改对象而不是我的显示？

  • 772

我在 vue (+vuetify) 中有一个条件表。如何更改 sogl 值的输出：“null，true false”为“empty，yes，no”。更改表格中对象的显示？这些对象来自服务器。

  <v-data-table
    :headers="headers"
    :items="tableOne.memb"
    :items-per-page="5"
    item-key="id"
    class="elevation-1"
  >
  </v-data-table>

来自服务器的数组

[ { "id": "1", "info": { "ban": "track", "numbers": "3223", "sogl": true }}, 
{ "id": "2", "info": { "ban": "track", "numbers": "12312", "sogl": true }} ,
{ "id": "3", "info": { "ban": "track", "numbers": "455", "sogl": null}} ,
{ "id": "4", "info": { "ban": "track", "numbers": "423", "sogl": true }}]

脚本

<script>
    data: () => ({
        headers: [
          {
            text: 'Номер',
            align: 'start',
            sortable: false,
            value: 'id',
          },
          { text: 'Блок',      value: 'info.ban' },
          { text: 'Номер',     value: 'info.numbers' },
          { text: 'Согласие',  value: 'info.sogl' },
        ],

    }),


  }
</script>
javascript

1 个回答

  1. Best Answer

    需要使用v-slot:item="props"。

    const app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      tableRowsSelected: [],
      headers: [{
          text: 'Номер',
          align: 'center',
          sortable: false,
          value: 'id',
        },
        {
          text: 'Блок',
          value: 'info.ban'
        },
        {
          text: 'Номер',
          value: 'info.numbers'
        },
        {
          text: 'Согласие',
          value: 'info.sogl'
        },
      ],
      items: [{
          "id": "1",
          "info": {
            "ban": "track",
            "numbers": "3223",
            "sogl": false
          }
        },
        {
          "id": "2",
          "info": {
            "ban": "track",
            "numbers": "12312",
            "sogl": true
          }
        },
        {
          "id": "3",
          "info": {
            "ban": "track",
            "numbers": "455",
            "sogl": null
          }
        },
        {
          "id": "4",
          "info": {
            "ban": "track",
            "numbers": "423",
            "sogl": true
          }
        }
      ]
    }
  },
  methods:{
    convertSogl(val) {
      if (val) {
        return 'Да';
      } else if (val === false) {
        return 'Нет';
      } else {
        return 'Пусто';
      }
    }
  },
})
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <template>
    <v-data-table
      :headers="headers"
      :items="items"
      :items-per-page="5"
      item-key="id"
      class="elevation-1"
    >
      <template
        v-slot:item="props"
      >
        <tr>
          <td>{{ props.item.id }}</td>
          <td>{{ props.item.info.ban }}</td>
          <td>{{ props.item.info.numbers }}</td>
          <td>{{ convertSogl(props.item.info.sogl) }}</td>
        </tr>
      </template>
    </v-data-table>
  </template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

    • 1

相关问题