Vue实现列点击排序及箭头标识功能的问题求助

问题说明 #

希望点击表格对应列时，数据按升序/降序排列，同时列后显示箭头表示排序顺序。当前使用Vue的v-on:click构建排序函数、v-bind添加箭头时遇到困难，需调整Vue/CSS/HTML代码。

代码调整方案 #

1. HTML代码修正 #

原代码存在thead标签闭合错误、tbody未绑定排序后数据、缺少排序箭头渲染的问题，修改如下：

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(header, key) in column" :key="key" @click="sortTable(key)">
          {{ header }}
          <!-- 渲染排序箭头 -->
          <span v-if="sortColumn === key">
            {{ sortOrder === 'asc' ? '↑' : '↓' }}
          </span>
          <span v-else>⇅</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 循环绑定排序后的计算属性 -->
      <tr v-for="row in sortedRows" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.phone }}</td>
      </tr>
    </tbody>
  </table>
</div>

2. Vue JS代码优化 #

修正初始化时的错误调用，完善排序逻辑，移除无用调试代码：

var app = new Vue({
  el: "#app",
  data: {
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [],
    sortColumn: 'id', // 默认以ID列排序
    sortOrder: "asc",
  },
  computed: {
    sortedRows() {
      if (!this.sortColumn) return this.rows;
      return this.rows.slice().sort((a, b) => {
        const aValue = a[this.sortColumn];
        const bValue = b[this.sortColumn];
        if (typeof aValue === "string") {
          return aValue.localeCompare(bValue) * (this.sortOrder === "asc" ? 1 : -1);
        }
        return (aValue - bValue) * (this.sortOrder === "asc" ? 1 : -1);
      });
    },
  },
  methods: {
    async fetchData() {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      const finalRes = await response.json();
      this.rows = finalRes;
    },
    sortTable(key) {
      if (key === this.sortColumn) {
        // 同一列点击切换排序方向
        this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
      } else {
        // 切换新列默认升序
        this.sortColumn = key;
        this.sortOrder = "asc";
      }
    },
  },
  mounted() {
    this.fetchData();
  },
});

3. CSS样式优化 #

添加交互提示和箭头样式，提升视觉体验：

table {
  text-align: left;
  font-family: "Open Sans", sans-serif;
  width: 500px;
  border-collapse: collapse;
  border: 2px solid #444777;
  margin: 10px;
}

table th {
  background: #444777;
  color: #fff;
  padding: 5px 8px;
  min-width: 30px;
  cursor: pointer; /* 提示可点击 */
  display: flex;
  align-items: center;
  gap: 4px; /* 文字与箭头间距 */
}

table td {
  padding: 5px;
  border-right: 2px solid #444777;
}

table tbody tr:nth-child(2n) {
  background: #d4d8f9;
}

/* 调整箭头字号 */
table th span {
  font-size: 0.8em;
}

效果说明 #

• 点击表头列，自动切换该列的升序/降序状态，对应显示↑/↓箭头
• 未选中的列显示⇅箭头提示可排序
• 表头添加鼠标指针，增强交互感知
• 数据会根据当前排序规则实时重新渲染

内容的提问来源于stack exchange，提问作者Kiamn chovv