模糊搜尋 Bar - daniel-qa/Vue GitHub Wiki

模糊搜尋 Bar

wordFilter 是一個 ref 變量，用來存儲用戶在搜尋框中的輸入值。這是 el-input 的 v-model 直接綁定的數據，因此當用戶輸入內容時，wordFilter 會隨之更新。

  • showData 是一個計算屬性 (computed)，它根據 wordFilter 的值動態過濾 tableData中的數據。 showData 檢查 wordFilter 的值：

wordFilter 是空字符串（即沒有輸入），則返回 tableData 中的所有數據。

wordFilter 有值，則使用 filter() 方法篩選 tableData 中的每個項目，檢查其 name 或 shortCode 是否包含 wordFilter 中的值。

item.shortCode.includes(wordFilter.value)

<template>
    <div style="margin-bottom: 10px; margin-top: 70px;">

        <div style="display: flex; justify-content: center; align-items: center;">
            <span style="font-weight: bold; font-size: 23px; margin-right: 5px;">搜尋</span>
            <el-input v-model="wordFilter" placeholder="請填入簡碼或學校名稱" style="width: 500px;" />
        </div>

        <el-table :data="showData" stripe style="width: 100%">
            <el-table-column prop="code" label="代碼" />
            <el-table-column prop="shortCode" label="簡碼" />
            <el-table-column prop="name" label="學校名稱" />
            <el-table-column label="">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleUpdSchoolW(scope.row.id, scope.row.name, scope.row.shortCode)">歸戶</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script setup>
    import { ref, computed } from 'vue';

    // 三筆硬編碼假資料
    const tableData = ref([
        { id: 1, code: "SCHOOL001", shortCode: "SC1", name: "台灣大學1" },
        { id: 2, code: "SCHOOL002", shortCode: "SC2", name: "台北大學2" },
        { id: 3, code: "SCHOOL003", shortCode: "SC3", name: "中央大學3" },
    ]);

    const wordFilter = ref('');

    // 過濾數據
    const showData = computed(() => {

        if (!wordFilter.value) return tableData.value;

        return tableData.value.filter(item =>
            item.name.includes(wordFilter.value) ||
            item.shortCode.includes(wordFilter.value)
        );
    });

    // 歸戶操作
    const handleUpdSchoolW = (id, name, shortCode) => {
        console.log(`歸戶操作: ${name} (${shortCode}), ID: ${id}`);
        alert(`歸戶成功: ${name} (${shortCode}), ID: ${id}`);
    };
</script>

說明

Slot 插槽 (< template #default>) 是 Vue 提供的一種機制，允許你定制組件的內部顯示內容。Element Plus 的組件很多都支持插槽，可以自定義顯示邏輯和樣式。

插槽作用域

{ node, data } 是 el-cascader 組件暴露的作用域對象，它包含了當前節點的信息：

node: 節點相關的資料和屬性，比如節點的層級、選中狀態等。
node.level: 當前節點的層級（例如 1 表示第一層，2 表示第二層）。
node.isLeaf: 是否是葉子節點（沒有子節點的節點）。
node.path: 節點的完整層級路徑。
data: 當前節點的原始數據，即來自 options 數據結構中定義的內容。
data.label: 節點的顯示名稱。
data.value: 節點的值。

這些數據是 el-cascader 自動傳遞的，幫助開發者實現靈活的顯示和交互邏輯。

⚠️ **GitHub.com Fallback** ⚠️