<template> <view class="os-roll-body content"> <view class="os-roll-list"> <scroll-view class="os-roll" scroll-y="true" @scrolltolower="reachBottom" @refresherrefresh="reachTop" :refresher-triggered="refresh" :refresher-enabled="true"> <view class="os-prevent-roll"> <status-card v-for="item, index in dataList" :key="index" :data="item"></status-card> </view> </scroll-view> </view> <u-toast ref="uToast" /> </view> </template> 我要在最上边加个合格和不合格两个按钮，来跳转区分数据

您给出的代码是一个基于Vue.js框架构建的小程序页面模板。现在，您的需求是在这个页面顶部添加“合格”和“不合格”的按钮，用户点击这两个按钮后可以根据其选择区分数据。 以下是修改后的完整示例： ```html <template> <view class="os-roll-body content"> <!-- 新增部分 --> <view class="button-container"> <button @click="filterData('qualified')">合格</button> <button @click="filterData('unqualified')">不合格</button> </view> <view class="os-roll-list"> <scroll-view class="os-roll" scroll-y="true" @scrolltolower="reachBottom" @refresherrefresh="reachTop" :refresher-triggered="refresh" :refresher-enabled="true"> <view class="os-prevent-roll"> <status-card v-for="(item, index) in filteredDataList" :key="index" :data="item"></status-card> </view> </scroll-view> </view> <u-toast ref="uToast" /> </view> </template> <script> export default { data() { return { dataList: [], // 原始数据列表 filterType: '', // 当前筛选类型，默认为空表示全部显示 filteredDataList: [] // 筛选后的数据列表 }; }, methods: { // 初始化或刷新时更新数据 reachTop() { this.filteredDataList = [...this.dataList]; if (this.filterType === 'qualified') { this.filteredDataList = this.dataList.filter(item => item.status === 'qualified'); } else if (this.filterType === 'unqualified') { this.filteredDataList = this.dataList.filter(item => item.status === 'unqualified'); } }, // 分页加载更多 reachBottom() { console.log("触底事件触发..."); }, // 添加新的功能方法：根据类型筛选数据 filterData(type) { this.filterType = type; if (type === "qualified") { this.filteredDataList = this.dataList.filter(item => item.status === 'qualified'); } else if (type === "unqualified") { this.filteredDataList = this.dataList.filter(item => item.status === 'unqualified'); } else { this.filteredDataList = this.dataList; // 显示所有数据 } } }, mounted() { // 示例初始化数据（实际中应替换为您真实的API接口） this.dataList = [ { id: 1, status: 'qualified', name: '产品A' }, { id: 2, status: 'unqualified', name: '产品B' } ]; // 默认展示全量数据 this.filteredDataList = [...this.dataList]; } }; </script> <style scoped> .button-container { display: flex; gap: 10px; padding-bottom: 10px; } button { flex-grow: 1; background-color: #4CAF50; border: none; color: white; padding: 8px 16px; text-align: center; font-size: 16px; cursor: pointer; } button:hover { background-color: #45a049; } </style> ``` --- ### 关键改动说明 1. **新增按钮容器** - 我们在最上方增加了 `<view class="button-container">...</view>` 区域，其中包含两个按钮：“合格” 和 “不合格”。分别绑定到 `@click='filterData('qualified')'` 和 `@click='filterData('unqualified')'` 上面。 2. **引入状态控制机制** - 使用 `filterType` 属性保存当前用户的筛选条件。“qualified” 表示只看合格项目，“unqualified” 则代表查看不合格记录。默认值为空字符串，此时将不施加任何筛选规则直接渲染原始的数据表单内容。 3. **调整循环遍历范围** - 将原有的 `v-for` 替换为依据筛选结果生成的新数组变量 `filteredDataList` 进行迭代呈现组件实例。 4. **样式优化** - 给按钮区域设置了简单的布局与美化方案使其更美观易用。同时提供了基本交互反馈效果比如鼠标悬停变色等等。 --- ### 结果预期 通过以上更改之后，当访问者进入此界面便会看到一组明确标注好的切换选项位于顶部显眼位置供挑选使用；并且每次按下对应按键都能立刻反映出相应的变动情况——仅保留符合特定属性设定条目的子集予以视觉化展现出来而已！