使用UniApp實現下拉框和表格組件頁面

UniApp提供了一套完整的跨平臺開發框架，支持在多個平臺上運行。下拉框和表格是常見的UI組件，可以通過UniApp內置組件或第三方插件實現。

下拉框組件的實現

UniApp內置的<picker>組件可以實現下拉選擇功能。以下是一個基礎的下拉框實現示例：

<template><view><picker mode="selector" :range="options" @change="handlePickerChange"><view>當前選擇：{{selectedOption}}</view></picker></view>
</template><script>
export default {data() {return {options: ['選項1', '選項2', '選項3'],selectedOption: '請選擇'}},methods: {handlePickerChange(e) {this.selectedOption = this.options[e.detail.value]}}
}
</script>

表格組件的實現

UniApp沒有內置表格組件，但可以通過<view>和<text>組合實現表格效果，或使用第三方組件如uni-table：

<template><view><uni-table border><uni-tr><uni-th>姓名</uni-th><uni-th>年齡</uni-th><uni-th>職業</uni-th></uni-tr><uni-tr v-for="(item, index) in tableData" :key="index"><uni-td>{{item.name}}</uni-td><uni-td>{{item.age}}</uni-td><uni-td>{{item.job}}</uni-td></uni-tr></uni-table></view>
</template><script>
export default {data() {return {tableData: [{name: '張三', age: 25, job: '工程師'},{name: '李四', age: 30, job: '設計師'}]}}
}
</script>

下拉框與表格聯動

實現下拉框選擇后更新表格內容的聯動效果：

<template><view><picker mode="selector" :range="filterOptions" @change="filterTable"><view>篩選條件：{{currentFilter}}</view></picker><uni-table border><uni-tr><uni-th>姓名</uni-th><uni-th>部門</uni-th></uni-tr><uni-tr v-for="(item, index) in filteredData" :key="index"><uni-td>{{item.name}}</uni-td><uni-td>{{item.department}}</uni-td></uni-tr></uni-table></view>
</template><script>
export default {data() {return {filterOptions: ['全部', '技術部', '市場部', '人事部'],currentFilter: '全部',allData: [{name: '張三', department: '技術部'},{name: '李四', department: '市場部'},{name: '王五', department: '人事部'}],filteredData: []}},created() {this.filteredData = this.allData},methods: {filterTable(e) {this.currentFilter = this.filterOptions[e.detail.value]if(this.currentFilter === '全部') {this.filteredData = this.allData} else {this.filteredData = this.allData.filter(item => item.department === this.currentFilter)}}}
}
</script>

樣式優化

通過CSS可以進一步美化下拉框和表格：

/* 下拉框樣式 */
picker {padding: 15px;background-color: #f8f8f8;border-radius: 5px;margin: 10px;
}/* 表格樣式 */
uni-table {width: 100%;margin-top: 20px;
}uni-th {background-color: #f0f0f0;padding: 10px;
}uni-td {padding: 8px;text-align: center;
}

注意事項

1. 使用uni-table需要先安裝對應的uni-ui組件
2. 數據量較大時考慮分頁處理
3. 移動端適配需要注意表格的橫向滾動問題
4. 下拉框在H5和微信小程序中的表現略有不同

通過以上方法可以快速在UniApp中實現包含下拉框和表格的頁面，并能實現兩者間的數據聯動。