vue點擊按列清空值排序

我正在做一個小專案。我想要做的是當排序發生@click事件時，sortcol列被賦予 asc，desc，但是。我想要的是這個，我想清除除單擊列之外的其他列的值。

我無法弄清楚如何完成這項作業。

<template>
  <table>
    <thead>
    <tr>
      <th v-for="th in tableHeader" :key="th">
        <div class="flex" @click.prevent="sortByColumn(th.name)">
          <div class="sort-header-content">{{ th.text }}</div>
          <div v-if="sortcol[th.name]==='asc'">ArrowDownIcon</div>
          <div v-else-if="sortcol[th.name]==='desc'">ArrowUpIcon</div>
        </div>
      </th>
    </tr>
    </thead>
  </table>
</template>

<script>
export default {
  name: "Table",
  data() {
    return {
      columns: [
        {name: 'id', text: 'ID'},
        {name: 'name', text: 'Name'},
        {name: 'position', text: 'Position'},
        {name: 'office', text: 'Office'},
        {name: 'extension', text: 'Extension'},
        {name: 'startdate', text: 'Start Date'},
        {name: 'salary', text: 'Salary'},
      ],
      sortcol: {
        name: '',
        position: '',
        office: '',
        extension: '',
        startdate: '',
        salary: '',
      },
    }
  },
  methods: {
    sortByColumn(column) {
      let sortedColumn = this.sortcol[column]
      if (sortedColumn === '') {
        this.sortcol[column] = 'asc'
      } else if (sortedColumn === 'asc') {
        this.sortcol[column] = 'desc'
      } else if (sortedColumn === 'desc') {
        this.sortcol[column] = ''
      }
    },
  },
  computed: {
    tableHeader() {
      return this.columns
    },
  }
}
</script>

uj5u.com熱心網友回復：

sortcol如果屬性存在，您可以清空物件：

const app = Vue.createApp({
  data() {
    return {
      columns: [
        {name: 'id', text: 'ID'},
        {name: 'name', text: 'Name'},
        {name: 'position', text: 'Position'},
        {name: 'office', text: 'Office'},
        {name: 'extension', text: 'Extension'},
        {name: 'startdate', text: 'Start Date'},
        {name: 'salary', text: 'Salary'},
      ],
      sortcol: {},
      items: [{id: 1, name: 'aa', position: 2, office: 'AA', extension: 'tt', startdate: '12', salary: 55}, {id: 3, name: 'cc', position: 1, office: 'CC', extension: 'xx', startdate: '82', salary: 75}, {id: 2, name: 'bb', position: 8, office: 'BB', extension: 'zz', startdate: '15', salary: 35}]
    }
  },
  methods: {
    sortItems(column, col) {
      this.items = this.items.sort((a, b) => {
        return this.sortcol[column] === 'asc' ? a[col] > b[col] : a[col] < b[col] 
      })
    },
    sortByColumn(column) {
      const selected = column === Object.keys(this.sortcol)[0]
      if(selected) {
        this.sortcol[column] = this.sortcol[column] === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortcol = {}
        this.sortcol[column] = 'asc'
      }
      this.sortItems(column, Object.keys(this.sortcol))
    },
  },
  computed: {
    tableHeader() {
      return this.columns
    },
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <table>
    <thead>
    <tr>
      <th v-for="th in tableHeader" :key="th">
        <div class="flex" @click.prevent="sortByColumn(th.name)">
          <div class="sort-header-content">{{ th.text }}</div>
          <div v-if="sortcol[th.name]==='asc'">ArrowDownIcon</div>
          <div v-else-if="sortcol[th.name]==='desc'">ArrowUpIcon</div>
        </div>
      </th>
    </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td v-for="itm in item">
          {{ itm }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

uj5u.com熱心網友回復：

首先，從sortcol. 然后洗掉th.name傳遞給函式。sortcol然后，您可以在執行 for..of 回圈后洗掉該值。

new Vue({
  el: "#app",
  data() {
    return {
      columns: [
        {name: 'id', text: 'ID'},
        {name: 'name', text: 'Name'},
        {name: 'position', text: 'Position'},
        {name: 'office', text: 'Office'},
        {name: 'extension', text: 'Extension'},
        {name: 'startdate', text: 'Start Date'},
        {name: 'salary', text: 'Salary'},
      ],
      sortcol: {
        name: '',
        position: '',
        office: '',
        extension: '',
        startdate: '',
        salary: '',
      },
    }
  },
  methods: {
    sortByColumn(column) {
      let sortedColumn = this.sortcol[column]
      // Solution
      const colArr = Object.keys(this.sortcol)
      const extra = colArr.filter(e => e !== column)
      for (i of extra) {
        this.sortcol[i] = ''
      }
      
      if (sortedColumn === '') {
        this.sortcol[column] = 'asc'
      } else if (sortedColumn === 'asc') {
        this.sortcol[column] = 'desc'
      } else if (sortedColumn === 'desc') {
        this.sortcol[column] = ''
      }
    },
  },
  computed: {
    tableHeader() {
      return this.columns
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="th in columns" :key="th.name">
          <div class="flex" @click.prevent="sortByColumn(th.name)">
            <div class="sort-header-content">{{ th.text }}</div>
            <div v-if="sortcol[th.name]==='asc'">ArrowDownIcon</div>
            <div v-else-if="sortcol[th.name]==='desc'">ArrowUpIcon</div>
          </div>
        </th>
      </tr>
    </thead>
  </table>
</div>

標籤：javascriptVue.jsVuejs3

上一篇：Vuejs拖放如何去除陣列中重復的id

下一篇：如何使用python'socket'向FTP服務器發送多個命令？