当前位置：首页 > news >正文

使用UniApp实现下拉框和表格组件页面

news 2025/9/8 21:41:12

使用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;
}