Vue

Vite 分頁邏輯與搜尋功能(語法糖)

// 註解Ａ:在迭代物件屬性時，使用 for…in 迭代物件屬性 參考

  • A搜尋功能: 綁定搜尋表單，使用computed（計算功能）如果搜尋表單沒有值＝>返回獲取到的陣列;如果有那就搜尋表單去除空白與大小寫 indexOf !==-1，返回它 並返回陣列
    filter() js 過濾功能 filter() js
    indexOf 找出元素索引值的陣列 indexOf js
  • B分頁總數:過濾的總筆數除以每頁筆數，「無條件進位」＝>Math.ceil()：公式：Math.ceil（過濾的總筆÷每頁筆數）
    Math.ceil 無條件進位 javaScript 浮點數計算
  • C分頁項目
    1.計算出每一頁的第一個索引數（使用computed（計算功能））＝>當前頁面乘以每一頁減去每一頁=>最少都會在第一頁
    2.返回 => 搜尋後（過濾後）=>arr.slice([begin[, end]])回傳一個新陣列物件
    slice() js 給予開始或是結束索引，回傳一個新陣列物件 參閱slice() js
  • 選擇每頁顯示幾筆數據 v-model="pageValue" 綁定表單 ，函式 ＝> @change="changeItemsPerPage($event)"

以下是程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<template>
<div class="checkWork_area"> 
    <div class="search_bar_group">
        <button class="el-button el-button--primary"> 導出Excel</button>
        <!--綁定input  v-model="searchQuery"-->
        <input class="el-input__inner" 
        v-model="searchQuery" placeholder="search"/>
        <i class="icon-search"></i>
    </div>
    <!----table-->
    <div class="check_table_area">
        <tr>
             <th v-for="(item,thid) in tableHeader" :key="thid">
                {{item.subject}}
            </th>
        </tr>
        <tbody>
            <!--過濾以後才開始分頁排列-->
            <tr v-for="(item,index) in paginatedItems" :key="index">
    			<td>{{ Number(index+1 + startIndexValue) }}</td>
    			<td>{{ item.title }}</td>
    			<td>{{item.sourceWebName}}</td>
    			<td>{{ item.startDate}}</td>
            </tr>
    </tbody>
    </div>

    <!--＊分頁-->
    <ul class="pagination">
        <!--如果在第一頁時 上一頁就是disabled-->
    	<li :class="{ 'disabled': currentPage === 1 }" > 
            <a @click="prevPage">
                <i class="icon-chevron-left-solid"></i>
            </a>
        </li>
        <!--總頁數遍歷 ＝>如果當頁的點擊的 page就是active -->
    	<li v-for="(n,index ) in totalPages" :key="index" @click="itActive(n)" 
        :class="{ 'active': n === currentPage }" >
            <a>{{ n }}</a>
        </li>
         <!--如果在當前頁面等於總頁數就是disabled-->
    	<li 
        :class="{ 'disabled': currentPage === totalPages }" >   
            <a @click="nextPage">
            <i class="icon-chevron-right-solid"></i></a>
        </li>
         <li>共{{ paginatedItems.length }}筆</li>
            <li>
                <el-select
                    v-model="pageValue"
                    class="m-2"
                    placeholder="Select"
                    style="width: 240px"
                    @change="changeItemsPerPage($event)"
                >
                <el-option
                v-for="item in pagePerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
                </el-select>
            </li>
    </ul>
</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted, computed } from 'vue';
// 搜尋表單綁定
const searchQuery = ref<string>('');
// 當前頁面
const currentPage = ref<number>(1);
// 每頁幾筆
const itemsPerPage = ref<number>(10);
//選擇每頁顯示幾筆
const changeItemsPerPage = (event: number) => {
    itemsPerPage.value = event;
}
const pagePerOptions = [
    { value: '10', label: '10筆' },
    { value: '15', label: '15筆' },
    { value: '20', label: '20筆' },
    { value: '30', label: '30筆' },
    { value: '40', label: '40筆' },
    { value: '50', label: '50筆' },
]
const pageValue = ref<string>('10筆');
interface tableHeaderType {
    subject?: string;
    thid?: string;
}
const tableHeader = ref<tableHeaderType[]>([
    { subject: '項目', thid: 'item' },
    { subject: '主題', thid: 'title' },
    { subject: '來源', thid: 'orange' },
    { subject: '開始時間', thid: 'startTime' }
])
// listType屬性
interface listsType {
    UID?: string;
    version?: string;
    category?: string;
    comment?: string;
    descriptionFilterHtml?: string;
    discountInfo?: string;
    editModifyDate?: string;
    hitRate?: number;
    imageUrl?: string;
    masterUnit?: object;
    title?: string | any;
    sourceWebName?: string | any;
    startDate?: string | any;
}
// 表格數據
const lists = ref<listsType[]>([]);
// A搜尋功能過濾:綁定搜尋表單，使用computed（計算功能）如果搜尋表單沒有值＝>返回獲取到的陣列;如果有那就搜尋表單去除空白與大小寫 indexOf !==-1，返回它 並返回陣列
const filteredItems = computed(() => {
    let filteredItems = lists.value;
    if (searchQuery.value === '') {
        return filteredItems;
    }
    searchQuery.value = searchQuery.value.trim().toLowerCase();
    filteredItems = filteredItems.filter(function (opt: listsType) {
        // indexOf !==-1 =>
        if (opt.title.toLowerCase().indexOf(searchQuery.value) !== -1 || opt.sourceWebName.toLowerCase().indexOf(searchQuery.value) !== -1) {
            return opt;
        }
    })
    return filteredItems;
})
// 索引數字
const startIndexValue = ref<number>(1);

// 總頁數
const totalPages = computed(() => {
    // B分頁總數=>過濾的總筆數除以每頁筆數，「無條件進位」＝>Math.ceil()：公式：Math.ceil（過濾的總筆÷每頁筆數）
    return Math.ceil(filteredItems.value.length / itemsPerPage.value);
})
// 分頁項目
const paginatedItems = computed(() => {
    // 當前頁面乘以每一頁減去每一頁
    const startIndex = currentPage.value * itemsPerPage.value - itemsPerPage.value;
    startIndexValue.value = startIndex;
    // 返回 => 搜尋後（過濾後）=>arr.slice([begin[, end]])回傳一個新陣列物件
    return filteredItems.value.slice(startIndex, startIndex + itemsPerPage.value);
})
// 上一頁
const prevPage = () => {
    // 如果當前頁面小於 < 1
    if (currentPage.value > 1) {
        currentPage.value--;
    }
}
// 下一頁
const nextPage = () => {
    // 如果當前頁面小於 < 全部頁面 ＝。那當前頁就能＋＋
    if (currentPage.value < totalPages.value) {
        currentPage.value++;
    }
}
// 點擊獲得第幾頁塞入當前頁面
const itActive = (page: number) => {
    // 如果當前頁面是null那當前頁面是第一頁,否則是點擊頁面
    page === null ? currentPage.value = 1 : currentPage.value = page;
}
// 獲取數據
const getItems = async () => {
    try {
        const api = 'https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200';
        const res = await axios.get(api);
        lists.value = res.data;
    }
    catch (err) {
        console.log('err', err);
    }
}
onMounted(() => {
    getItems();
    console.log(typeof pagePerOptions)
})
</script>

github 分頁邏輯說明

父傳子到子分頁

組件
v-model 的參數語法不會直接修改 props 的值 ， 修改＝>使用父組件 pageValue 父傳給子，@update:pageValue=”pageValue = $event”， 當 Pagination 组件觸發 update:pageValue 事件時，子組件会觸發 update:pageValue 的自定義事件，並將新值作為参数傳遞給父組件

父組件
引入Pagination.vue 子組件

<Pagination
:currentPage=”currentPage”
:totalPages=”totalPages”
:totoItem=”filteredItems.length”
:pagePerOptions=”pagePerOptions”
:pageValue=”pageValue”
@update:pageValue=”pageValue = $event”
@sendprevPage=”prevPage”
@sendNextPage=”nextPage”
@sendItActive=”itActive”
@sendOnChange=”changeItemsPerPage”
/>
傳值與接收子組件的通訊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<template>
<div class="checkWork_area"> 
    <div class="search_bar_group">
        <button class="el-button el-button--primary"> 導出Excel</button>
        <!--綁定input  v-model="searchQuery"-->
        <input class="el-input__inner" 
        v-model="searchQuery" placeholder="search"/>
        <i class="icon-search"></i>
    </div>
    <!----table-->
    <div class="check_table_area">
        <tr>
             <th v-for="(item,thid) in tableHeader" :key="thid">
                {{item.subject}}
            </th>
        </tr>
        <tbody>
            <!--過濾以後才開始分頁排列-->
            <tr v-for="(item,index) in paginatedItems" :key="index">
    			<td>{{ Number(index+1 + startIndexValue) }}</td>
    			<td>{{ item.title }}</td>
    			<td>{{item.sourceWebName}}</td>
    			<td>{{ item.startDate}}</td>
                
            </tr>
        </tbody>
    </div>

<!--子組件Pagination -->
    <Pagination 
        :currentPage="currentPage" 
        :totalPages="totalPages" 
        :totoItem="filteredItems.length"
        :pagePerOptions="pagePerOptions"
        :pageValue="pageValue"
        @update:pageValue="pageValue = $event"
        @sendprevPage="prevPage" 
        @sendNextPage="nextPage"
        @sendItActive="itActive"
        @sendOnChange="changeItemsPerPage"
    />
</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted, computed } from 'vue';
import Pagination from '../components/Pagination.vue';
// 搜尋表單綁定
const searchQuery = ref<string>('');
// 當前頁面
const currentPage = ref<number>(1);
// 每頁幾筆
const itemsPerPage = ref<number>(10);
const changeItemsPerPage = (event: number) => {
    itemsPerPage.value = event;
}
const pagePerOptions = [
    { value: '10', label: '10筆' },
    { value: '15', label: '15筆' },
    { value: '20', label: '20筆' },
    { value: '30', label: '30筆' },
    { value: '40', label: '40筆' },
    { value: '50', label: '50筆' },
]
const pageValue = ref<string>('10筆');
interface tableHeaderType {
    subject?: string;
    thid?: string;
}
const tableHeader = ref<tableHeaderType[]>([
    { subject: '項目', thid: 'item' },
    { subject: '主題', thid: 'title' },
    { subject: '來源', thid: 'orange' },
    { subject: '開始時間', thid: 'startTime' }
])
// listType屬性
interface listsType {
    UID?: string;
    version?: string;
    category?: string;
    comment?: string;
    descriptionFilterHtml?: string;
    discountInfo?: string;
    editModifyDate?: string;
    hitRate?: number;
    imageUrl?: string;
    masterUnit?: object;
    title?: string | any;
    sourceWebName?: string | any;
    startDate?: string | any;
}
// 表格數據
const lists = ref<listsType[]>([]);
// A搜尋功能過濾:綁定搜尋表單，使用computed（計算功能）如果搜尋表單沒有值＝>返回獲取到的陣列;如果有那就搜尋表單去除空白與大小寫 indexOf !==-1，返回它 並返回陣列
const filteredItems = computed(() => {
    let filteredItems = lists.value;
    if (searchQuery.value === '') {
        return filteredItems;
    }
    searchQuery.value = searchQuery.value.trim().toLowerCase();
    filteredItems = filteredItems.filter(function (opt: listsType) {
        // indexOf !==-1 =>
        if (opt.title.toLowerCase().indexOf(searchQuery.value) !== -1 || opt.sourceWebName.toLowerCase().indexOf(searchQuery.value) !== -1) {
            return opt;
        }
    })
    return filteredItems;
})
// 索引數字
const startIndexValue = ref<number>(1);

// 總頁數
const totalPages = computed(() => {
    // B分頁總數=>過濾的總筆數除以每頁筆數，「無條件進位」＝>Math.ceil()：公式：Math.ceil（過濾的總筆÷每頁筆數）
    return Math.ceil(filteredItems.value.length / itemsPerPage.value);
})
// 分頁項目
const paginatedItems = computed(() => {
    // 當前頁面乘以每一頁減去每一頁
    const startIndex = currentPage.value * itemsPerPage.value - itemsPerPage.value;
    startIndexValue.value = startIndex;
    // 返回 => 搜尋後（過濾後）=>arr.slice([begin[, end]])回傳一個新陣列物件
    return filteredItems.value.slice(startIndex, startIndex + itemsPerPage.value);
})
// 上一頁
const prevPage = () => {
    // 如果當前頁面小於 < 1
    if (currentPage.value > 1) {
        currentPage.value--;
    }
}
// 下一頁
const nextPage = () => {
    // 如果當前頁面小於 < 全部頁面 ＝。那當前頁就能＋＋
    if (currentPage.value < totalPages.value) {
        currentPage.value++;
    }
}
// 點擊獲得第幾頁塞入當前頁面
const itActive = (page: number) => {
    // 如果當前頁面是null那當前頁面是第一頁,否則是點擊頁面
    page === null ? currentPage.value = 1 : currentPage.value = page;
}
// 獲取數據
const getItems = async () => {
    try {
        const api = 'https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200';
        const res = await axios.get(api);
        lists.value = res.data;
    }
    catch (err) {
        console.log('err', err);
    }
}
onMounted(() => {
    getItems();
    console.log(typeof pagePerOptions)
})
</script>

分頁的父傳子

新增Pagination.vue 子組件
使用＝>import { defineProps } from ‘vue’;
// prop 接收物件設定type
const props = defineProps({
currentPage: { type: Number },
totalPages: { type: Number },
totoItem: { type: Number },
pagePerOptions: Object,
pageValue: { type: String },
})
// 父對子傳值
const emits = defineEmits([‘sendprevPage’, ‘sendNextPage’, ‘sendItActive’, ‘sendOnChange’]);
const sendprevPage = () => {
emits(‘sendprevPage’,)
}
const sendNextPage = () => {
emits(‘sendNextPage’,)
}
const sendItActive = (page: number) => {
emits(‘sendItActive’, page)
}
const sendOnChange = (event: number) => {
emits(‘sendOnChange’, event)
}

子組件=>Pagination.vue 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
    <ul class="pagination">
        <li :disabled="currentPage === 1">
            <a @click="sendprevPage"><i class="icon-chevron-left-solid"></i></a>
        </li>
        <li v-for="(n, index ) in totalPages" :key="index" @click="sendItActive(n)"
            :class="{ 'active': n === currentPage }">
            <a> {{ n }}</a>
        </li>
        <li :disabled="currentPage === totalPages">
            <a @click="sendNextPage">
                <i class="icon-chevron-right-solid"></i>
            </a>
        </li>
        <li>共{{ totoItem }}筆</li>
        <li>
            <el-select 
            :model-value="pageValue"
            @update:model-value="$emit('update:pageValue', $event)"
             class="m-2" 
             placeholder="Select" 
             style="width: 240px"
                @change="sendOnChange($event)">
                <el-option v-for="item in pagePerOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </li>
    </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { defineProps } from 'vue'
const props = defineProps({
    currentPage: { type: Number },
    totalPages: { type: Number },
    totoItem: { type: Number },
    pagePerOptions: Object,
    pageValue: { type: String },

})


const emits = defineEmits(['sendprevPage', 'sendNextPage', 'sendItActive', 'sendOnChange']);
const sendprevPage = () => {
    emits('sendprevPage',)
}
const sendNextPage = () => {
    emits('sendNextPage',)
}
const sendItActive = (page: number) => {
    emits('sendItActive', page)
}
const sendOnChange = (event: number) => {
    emits('sendOnChange', event)
}
</script>
github 分頁邏輯，分頁可選每頁頁數與搜尋功能，父子間的通訊 父子間的通訊

GitHub 說明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style lang="scss" scoped>
.active {
    a {
        color: red;
        border-bottom:2px solid #3333;
    }
}
.pagination{
    display: flex;
    justify-content: center;
    list-style-type:none;
    > li {
        margin: auto 10px;
        list-style-type:none;
        a{
            background-color: #b0cbfb;
            border: 2px solid #3f51b5;
            border-radius: 9999rem;
            color:#3f51b5;
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            width: 30px;
            &:hover{
                background-color: #3f51b5;
                border: 2px solid #3f51b5;
                color:#ffff;
            }
        }
        &.disabled{
            color:#ddd;
            cursor: not-allowed;
            a{
                background-color: #dddddd;
                border: 2px solid #b0cbfb;
                border-radius: 9999rem;
                color:#c9c2c2;
                display: block;
                height: 30px;
                line-height: 30px;
                text-align: center;
                width: 30px;
            }
        }
    }
}
</style>