Блог

Вот пример моей таблицы.

  ---- -------- --------------- 
| ID |  User  | Creation_date |
 ---- -------- --------------- 
|  1 | Bob    | 2020-05-05    |
|  2 | Bob    | 2020-05-06    |
|  3 | Bob    | 2020-06-06    |
|  4 | John   | 2020-05-04    |
|  5 | John   | 2020-05-07    |
|  6 | John   | 2020-06-10    |
|  7 | Robert | 2020-04-04    |
|  8 | Robert | 2020-05-05    |
|  9 | Robert | 2020-06-07    |
| 10 | Robert | 2020-09-09    |
 ---- -------- --------------- 
  

Что я хочу: я хочу показывать только первое значение каждого «Пользователя» и при нажатии на строку переключать скрытые значения.

  ---- -------- --------------- 
| ID |  User  | Creation_date |
 ---- -------- --------------- 
|  1 | Bob    | 2020-05-05    |
|  4 | John   | 2020-05-04    |
|  7 | Robert | 2020-04-04    |
 ---- -------- --------------- 

  

В моем текущем коде я пробовал несколько разных подходов, но я не могу понять, как отобразить только первое значение и скрыть остальные.

 <template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>User</th>
          <th>Creation date</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="row in local_users">
          <tr @click="row.isVisible = !row.isVisible">
            <div v-if="row.isVisible">
              <td>{{row.user_id}}</td>
              <td>{{row.username}}</td>
              <td>{{row.creation_date}}</td>
            </div>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: ["users"],

  data() {
    return {
      local_users: [],
    };
  },

  created() {
    this.local_users = this.users.map((e) => {
      return { ...e, isVisible: true };
    });
  },
};
</script>
  

Я переместил коды (клонировать this.users в this.local_users ) из created() в watch of this.users , иначе local_users они не будут синхронизированы при props=users обновлении.

Затем использует два свойства данных для хранения видимого состояния ( invisibles ) и индекса для первого имени пользователя ( firstMatches ). firstMatches будет сброшен при this.users изменении.

Ниже приведена демонстрация:

 Vue.component('v-table',{
    template:`
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>User</th>
          <th>Creation date</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(row, index) in local_users">
          <tr @click="toggle(row)" :key="index" v-if="firstMatches[row.username] === index || !invisibles[row.username]">
              <td>{{row.user_id}}</td>
              <td>{{row.username}}</td>
              <td>{{row.creation_date}}</td>
          </tr>
        </template>
      </tbody>
    </table>
    <pre>{{invisibles}}</pre>
  </div>
    `,
  props: ["users"],
  data() {
    return {
      local_users: [],
      firstMatches: {},
      invisibles: {}
    };
  },
  watch: {
    users: {
      handler: function (newVal) {
        this.firstMatches = {}
        this.local_users = (newVal || []).slice()
        this.local_users.forEach((e, i) => {
          if (!(e.username in this.firstMatches)) {
            this.firstMatches[e.username] = i
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    toggle: function (row) {
      this.$set(this.invisibles, row.username, !this.invisibles[row.username])
    }
  }
})

new Vue ({
  el:'#app',
  data () {
    return {
      users: [
        {user_id: 1, username: 'Bob', creation_date: '2020-01-01'},
        {user_id: 2, username: 'Bob', creation_date: '2020-01-02'},
        {user_id: 3, username: 'Tom', creation_date: '2020-01-03'},
        {user_id: 4, username: 'Bob', creation_date: '2020-01-04'},
        {user_id: 5, username: 'Tom', creation_date: '2020-01-05'},
        {user_id: 6, username: 'Sun', creation_date: '2020-01-05'},
      ]
    }
  }
})  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <div>
            <v-table :users="users"></v-table>
        </div>
    </div>
</div>