<!-- 问卷 --> <template> <div class="maingw" ref="maingwwj" style="height: 100%; overflow: auto"> <el-row :gutter="gutter"> <el-button type="danger" v-if="this.dataitem.CHI_MED_FORM_NO" @click="deletefun" style="position: absolute; left: 20px; top: 10px" > 删除 </el-button> <h3> 中医体质辨识问卷 <el-button size="mini" v-if="this.dataitem.CHI_MED_FORM_NO" round @click="dayinView()" >打印预览</el-button > </h3> </el-row> </template> 一进来页面将页面全部灰置掉,当点击编辑按钮时页面恢复正常

时间: 2024-04-21 08:22:08 浏览: 7
根据你提供的代码,可以使用一个 `isEdit` 变量来控制页面的编辑状态。当 `isEdit` 为 `false` 时,将页面置灰,当点击编辑按钮时,将 `isEdit` 设置为 `true`,页面恢复正常。以下是修改后的代码: ```html <template> <div class="maingw" ref="maingwwj" style="height: 100%; overflow: auto"> <el-row :gutter="gutter"> <el-button type="danger" v-if="dataitem.CHI_MED_FORM_NO && !isEdit" @click="deletefun" style="position: absolute; left: 20px; top: 10px" > 删除 </el-button> <h3> 中医体质辨识问卷 <el-button size="mini" v-if="dataitem.CHI_MED_FORM_NO && !isEdit" round @click="dayinView()" >打印预览</el-button > </h3> </el-row> </div> </template> <script> export default { data() { return { isEdit: false, // other data properties } }, methods: { deletefun() { // delete function implementation }, dayinView() { // print preview function implementation }, // other methods } } </script> ``` 然后在编辑按钮的点击事件中,将 `isEdit` 设置为 `true`: ```html <el-button type="primary" @click="isEdit = true">编辑</el-button> ``` 这样,在没有点击编辑按钮时,页面将会处于置灰状态,点击编辑按钮后,页面将恢复正常。

相关推荐

<view style="position: fixed; top: 0; width: 100%;"> <view class="tab"> <view class="tab-item {{currentTab == 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0" data-value="待领取">待领取 </view> <view class="tab-item {{currentTab == 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1" data-value="进行中">进行中 </view> <view class="tab-item {{currentTab == 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2" data-value="已完成">已完成 </view> <view class="tab-item {{currentTab == 3 ? 'active' : ''}}" bindtap="switchTab" data-index="3" data-value="已逾期">已逾期 </view> <view class="tab-item {{currentTab == 4 ? 'active' : ''}}" bindtap="switchTab" data-index="4" data-value="已驳回">已驳回 </view> </view> </view> <view style="margin-top: 100rpx;"> <view wx:for="{{underway}}" wx:key="code"> <view class="boxcard"> <view class="projectSampleId"> 问卷ID:{{item.projectSampleId}} <text class="labeltext">{{label}}</text> </view> <view class="border-bottom"></view> <view wx:for="{{item.newtags}}" wx:if="{{item.tags != null}}" class="tags" wx:key="index" wx:for-item="newitem"> {{newitem}} </view> <view class="content"> <view>开始时间:{{item.startDate}}</view> <view>结束时间:{{item.endDate}}</view> <view>所属项目:{{item.projectName}}</view> <view>任务ID:{{item.customerTaskId}}</view> </view> <view class="bottombutton"> <button size="mini" class="rectifyFeedback" wx:if="{{currentTab==1||currentTab==3}}" bindtap="rectifyFeedback" data-customer-task-id="{{ item.customerTaskId }}">整改反馈</button> <button size="mini" class="reviewFeedback" bindtap="reviewFeedback" data-customer-task-id="{{item.customerTaskId}}" wx:if="{{currentTab==2}}">查看反馈</button> <button size="mini" class="receiveTask" wx:if="{{currentTab==0}}" bindtap="receiveTask" data-customer-task-id="{{ item.customerTaskId }}"> 领取任务</button> <button size="mini" class="taskSamples" bindtap="taskSamples" data-project-Sample-Id="{{item.projectSampleId}}">任务样本 </button> <button size="mini" class="overruleTask" wx:if="{{currentTab==0||currentTab==1||currentTab==3}}" bindtap="overruleTask" data-customer-task-id="{{ item.customerTaskId }}">驳回任务</button> <button size="mini" class="overruleApplication" bindtap="overruleApplication" data-customer-task-id="{{item.customerTaskId}}" wx:if="{{currentTab==4}}">驳回详情</button> </view> </view> </view> </view> 这是我的wxml代码。请问我的按钮在上划时。会遮挡tab怎么解决

最新推荐

recommend-type

GB0-620题库.docx

h3c超融合题库,准确率高达90%以上,覆盖率100%,本题 库已有40多人使用并考试通过,放心使用。
recommend-type

kaggle练习-共享单车数据分析

若甲方不提供数据,则需要根据相关问题从网络爬取,或者以问卷调查形式收集。本次共享单车数据分析项目数据源于Kaggle [https://www.kaggle.com/c/bike-sharing-demand/data]。 1.2 载入数据 // 载入工具包 import ...
recommend-type

PMP备考宝典PMP备考知识点集锦--应战篇(三).docx

组织者使用调查问卷就重要的项目议题征询意见,然后对专家的答卷进行归纳,并把结果反馈给专家做进一步评论。这个过程反复几轮后,就可能达成一致意见。德尔菲技术有助于减轻数据的偏倚,防止任何个人对结果产生不...
recommend-type

奥纬X教科院X好未来-《2020中国K-12教育培训To B市场发展报告》.pdf

本次调研历时三个月, 共采集到有效问卷 365 份。通过对调研数据的综合分析,项目调研 团队系统梳理出当前教育培训行业的发展现状和 需求模型,为本报告中关于政策影响、需求定 位、供给现状、发展趋势、技术应用等的...
recommend-type

Java swing + socket + mysql 五子棋网络对战游戏FiveChess.zip

五子棋游戏想必大家都非常熟悉,游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

用 Python 画一个可以动的爱心

好的,我可以帮助您使用Python来绘制一个动态的爱心。您可以使用turtle库来实现。以下是实现代码: ```python import turtle import math # 设置画布和画笔 canvas = turtle.Screen() canvas.bgcolor("black") pencil = turtle.Turtle() pencil.speed(0) pencil.color("red", "pink") pencil.pensize(3) # 定义爱心函数 def draw_love(heart_size, x_offset=0, y_offset=0):
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。