vue element ui 簡單表格下鑽邏輯淺記

夏小夏吖發表於2024-07-18
VueUI

在 Vue.js 中結合 Element UI 來實現點選表格欄位跳轉到對應欄位的表格，並使用麵包屑導航以方便使用者隨時跳回之前的層級，可以透過以下步驟來完成：

步驟 1: 準備資料結構

首先，你需要一個巢狀的資料結構來表示不同級別的表格資料。例如：

const data = [
  {
    id: 1,
    name: 'Parent 1',
    children: [
      {
        id: 11,
        name: 'Child 1',
        children: [
          { id: 111, name: 'Grandchild 1', children: [] },
          { id: 112, name: 'Grandchild 2', children: [] }
        ]
      },
      {
        id: 12,
        name: 'Child 2',
        children: []
      }
    ]
  },
  // 更多層級...
];

步驟 2: 建立 Vue 元件（直接複製此元件即可）

建立一個 Vue 元件，它包含一個 el-table 和一個 el-breadcrumb 元件。el-table 將用於顯示資料，而 el-breadcrumb 將用於導航。

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index" @click="jumpTo(index)">
        {{ crumb }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="currentData" @row-click="navigateToRow">
      <el-table-column prop="name" label="Name"></el-table-column>
      <!-- 更多列 -->
    </el-table>
  </div>
</template>

<script>
const data = [
  {
    id: 1,
    name: 'Parent 1',
    children: [
      {
        id: 11,
        name: 'Child 1',
        children: [
          { id: 111, name: 'Grandchild 1', children: [] },
          { id: 112, name: 'Grandchild 2', children: [] }
        ]
      },
      {
        id: 12,
        name: 'Child 2',
        children: []
      }
    ]
  },
  // 更多層級...
];


export default {
  data() {
    return {
      data,
      currentData: data,
      breadcrumbs: ['Home'],
      breadcrumbPaths: [[]]
    };
  },
  methods: {
    navigateToRow(row) {
      if (row.children && row.children.length > 0) {
        this.currentData = row.children;
        this.breadcrumbs.push(row.name);
        this.breadcrumbPaths.push([...this.breadcrumbPaths[this.breadcrumbPaths.length - 1], row]);
      }
    },
    jumpTo(index) {
      const path = this.breadcrumbPaths[index];
      let currentData = data;
      path.forEach(row => {
        currentData = row.children;
      });
      this.currentData = currentData;
      this.breadcrumbs = this.breadcrumbs.slice(0, index + 1);
      this.breadcrumbPaths = this.breadcrumbPaths.slice(0, index + 1);
    }
  }
};
</script>

解釋：

  1. 資料模型: 我們定義了一個巢狀的 data 結構，代表了不同層級的資料。

  2. Vue 元件: 我們在元件中定義了 currentData 和 breadcrumbs，前者用於顯示當前層級的資料，後者用於儲存當前的麵包屑路徑。

  3. 方法:

    • navigateToRow: 當表格行被點選時呼叫，檢查該行是否擁有子資料，如果有，則更新 currentData 並在麵包屑中新增新項。
    • jumpTo: 當面包屑項被點選時呼叫，它會根據麵包屑的索引跳回到相應的層級。

透過這種方式，你就可以在 Vue.js 應用中實現一個具有面包屑導航的表格下鑽功能，使用者可以輕鬆地在不同層級之間跳轉。這個示例是一個基本的實現，你可以根據具體需求進行擴充套件，比如新增更多的互動細節、最佳化UI設計等。

相關文章