精华内容
下载资源
问答
  • 最近遇到了个需求,要求单击通过或者拒绝时隐藏 两个按钮并且显示状态 拒绝或 通过 问题出现 以下是这个状态切换的代码,根据v-if 判断状态是不是审核中,若是的话,就显示按钮,否则显示tag <el-table-column ...

    前言

    最近遇到了个需求,要求单击通过或者拒绝时隐藏 两个按钮并且显示状态 拒绝或 通过在这里插入图片描述

    问题出现

    以下是这个状态切换的代码,根据v-if 判断状态是不是审核中,若是的话,就显示按钮,否则显示tag

          <el-table-column class-name="status-col" label="订单状态" width="140">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 'REVIEWING'" class="action-bts">
                <el-button type="success" size="mini" @click="passApply(scope.row.order_no, scope.$index)">通过</el-button>
                <el-button type="danger" size="mini" @click="openReasonDialog(scope.row.order_no, scope.$index)">拒绝</el-button>
              </div>
              <el-tag v-else :type="statusFilter(scope.row.status).type">{{ statusFilter(scope.row.status).label }}
              </el-tag>
            </template>
          </el-table-column>
    

    要求不能整个表更新,只能更新这一个单元格,由于vue无法检测到数组内的更新,所以我们不能直接通过this.xx=xx来实现

    问题解决

    这里使用了vue提供的 this.$set()函数来解决,
    在这里插入图片描述

    我这里使用了
    其中当前行row可以通过 scope.$index 获取,然后传入事件处理函数

    this.$set(this.list[row], 'status', 'SUCCESS')
    

    在这里插入图片描述

    结尾

    记录一下,挺好玩的。。。

    展开全文
  • 用html和js做一个登录/注册界面,不连接数据库,这个案例用到了js的引入,form表单结合表格的布局,以及登录界面常用的密码的隐藏与实现的方法。 进入正题,先看我们的成型案例:如下图 案例大概就是这个样子,讲...

    用html和js做一个登录/注册界面,不连接数据库,这个案例用到了js的引入,form表单结合表格的布局,以及登录界面常用的密码的隐藏与实现的方法。

    进入正题,先看我们的成型案例:如下图
    在这里插入图片描述
    案例大概就是这个样子,讲道理,开始写代码之前得来一波案例分析。
    首先,宏观看布局,然后局部看细节。布局来看这个界面的组成也很简单,有六个输入框,一个单选框,一个多选框,以及几个按钮。宏观布局首先抛开功能看界面,分析界面的组成,可以用两种方法实现,css和表格。我们采用表格的方式做布局,然后要将输入框及按钮放入表格中,大概就是这么个样子:
    在这里插入图片描述
    我用了一个15行3列的表格作为容器(其实2列就可以,习惯预留一列做扩充),当然的,表格大小看个人喜好,15行30行什么的你开心就好。
    具体代码不写,只给你们写写简单的思路,看懂多少看你们造化了(→_→):
    当然我们的主要思路是表单和表格的结合,所以你需要先套一下,像这样

    <form>
    	<table>
    	</table>
    </form>
    

    然后让我们来瞅瞅代码(全部都是开个头,细节需要你们自己完善)
    表格的第二行:

    <tr>
    	<td>姓名</td>
    	<td><input type="text"></td>
    </tr>
    

    表格的第三行:

    <tr>
    	<td>密码</td>
    	<td><input type="password"></td>
    </tr>
    

    表格的第四行:同上
    五、六略。
    表格的第七行:

    <tr>
    	<td>性别</td>
    	<td><input type="radio" name="sex"><input type="radio" name="sex"></td>
    </tr>
    

    第八行略略略
    第九行

    <tr height="8%">
    				<td align="right">职业:</td>
    				<td><select id="zhiye">
    						<option>请选择...</option>
    						<option>教育/研究</option>
    						<option>艺术/设计</option>
    						<option>法律相关</option>
    						<option>行政管理</option>
    						<option>传播/媒体</option>
    						<option>顾问/分析员</option>
    					</select></td>
    				<td></td>
    </tr>
    

    表的第十行:

    <tr>
    		<td align="right">个人爱好:</td>
    		<td height="14%">
    		<input type="checkbox" name="aihao"> 电脑网络<input type="checkbox" name="aihao"> 影视娱乐<input type="checkbox" name="aihao"> 棋牌游戏 <br>
    		<input type="checkbox" name="aihao"> 读书读报<input type="checkbox" name="aihao">美酒佳肴 <input type="checkbox" name="aihao"> 绘画书法</td>
    		<td></td>
    </tr>
    

    表的第十一行:

    <tr>
    		<td></td>
    		<td> <input type="button"  value="全选" onclick="aihao1()">
    		<input type="button"  value="全不选" onclick="aihao2()">
    		<input type="button"  value="反选" onclick="aihao3()"></td>
    		<td></td>
    </tr>
    

    表的第十二行:

    <tr height="8%">
    		<td align="right"> 留言内容:</td>
    		<td><textarea cols="35" rows="4" ></textarea></td>
    		<td></td>
    </tr>
    

    十三行不告你,,,
    表的第十四行:

    <tr>
    		<td></td>
    		<td align="center">
    		<input type="submit">
    		<input type="reset"></td>
    		<td></td>
    </tr>
    

    到这里这个登录界面也就算完成了99%,现在来解决剩下的1%。首先有请js登场(外部链接式,不懂三种引入方式的请出去,然后把门带上):

    <head>
    	<script type="text/javascript" src="js/js.js"></script>
    	<style type="text/css">
    	....此处略去无数个div
    	</style>
    </head>
    

    在这里插入图片描述
    这句提示语句看似简单,实则也不难,首先在输入框后边缀一个div,div里面放一个焦点事件,比如这样οnfοcus=“yonghu1()”,然后function的代码就是这样的

    function yonghu1()
    {
    	var c=document.getElementById("pname").value;
    	var cc=/^[a-zA-Z]{5,18}$/;
    	if(!cc.exec(c))
    	{
    		var pname=document.getElementById("yonghu");
    		pname.innerHTML="<font color='#FF0000' size='1.5'><b>用户名必须以字母开头</b></font>";
    		return false;
    	}
    	else
    	{
    		var pname=document.getElementById("yonghu");
    		pname.innerHTML="<font color='green'></font>";
    	}
    }
    

    我猜你们看不懂,所以我苍白的解释是这样的:姓名的输入框的id=“pname”,变量c接收了这个pname对象的value值,cc是一个正则表达式(不懂的请出去,谢谢),然后判断c与cc是否匹配,不匹配就return false,匹配的话就输出绿色的√,
    就像这样,是不是很人性化。
    在这里插入图片描述
    是的没错 剩下的思路都是这样的,解释实在太累了。
    到这里99%也就讲完了,开始剩下的1%(陷入思考…)。相信诸君在n多的登录见面的都见过这种的自带小眼睛的密码框了吧,点一下还能显示密码,神奇不。
    在这里插入图片描述
    首先强调一下,这个小眼睛是我自己画的,没错画的。
    在这里插入图片描述
    所以你也能画出自己的眼睛的,眼睛有了我们还需要一个div把这个眼睛装起来,然后神不知鬼不觉的把这个小眼睛移到密码输入框上,再给眼睛添加个onclick的事件就可以啦。什么!你问我怎么移?

    .yanjing
    			{
    				margin-left: 105px;
    				margin-top: -22px;	
    			}
    

    然后,重点思路来了,password类型的输入框是默认隐藏的,我们要想显示出来有俩种方式,硬刚和迂回。所谓硬刚就是不改变这种默认的方式,get对象.value的值是不是就可以得到它了,得到之后想怎么显示还不是你说了算嘛。
    迂回方式就是把password的类型改掉,改成可以明文的类型,比如text?反正我就是这样做的,通过点击触发事件来修改类型,就像这样。

    function show()
    {
    	var x=document.getElementById("mima");
    	if(x.type=="password")
    	{
    		x.type="text";
    	}
    	else
    	{
    		x.type="password";
    	}
    }
    

    在这里插入图片描述
    至于这三个按钮相信我你已经会了,你都会显示密码了,你告诉我你不会这,合适吗?

    function aihao1()
    {
    	var b=document.getElementsByName("aihao");
    	for(var i=0;i<b.length;i++)
    	{
    		b[i].checked=true;
    	}
    }
    function aihao2()
    {
    	var b1=document.getElementsByName("aihao");
    	for(var i=0;i<b1.length;i++)
    	{
    		b1[i].checked=false;
    	}
    }
    function aihao3()
    {
    	var b2=document.getElementsByName("aihao");
    	for(var i=0;i<b2.length;i++)
    	{
    		b2[i].checked=!b2[i].checked;
    	}
    }
    

    不知道aihao1、aihao2、aihao3是什么的,翻回去重看表的十行和十一行。
    讲道理,代码还是要自己写的,只提供思路。
    (代码拙劣仅供参考)
    注:以上代码均来自实际编写,如有问题请留言,转载请注明出处。

    展开全文
  • 1、场景 在实际工作开发中,我们在处理el-form表单校验问题时常会遇到这样一种情况:根据...【2】原理:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基

    1、场景

    在实际工作开发中,我们在处理el-form表单校验问题时常会遇到这样一种情况:根据不同的条件,展示不同的el-form-item,这个时候我们就需要考虑表单元素的显示与隐藏。在vue中,控制显示隐藏的有两个指令:v-if和v-show。
    【1】两者不同点:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;
    【2】原理:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
    【3】编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
    【4】性能消耗v-if有更高的切换消耗;v-show有更高的初始渲染消耗
    【5】使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。

    2、指令的选择

    【1】首先我选择使用v-if来控制el-form-item元素的显示隐藏,但是在使用过程中发现,使用v-if来控制的el-form-item元素,在后续的条件切换显示中,会造成表单校验失效的问题
    【2】由于v-if存在表单校验失效的问题,所以后续我又尝试了使用v-show来控制,但是v-show也存在一个问题,j就是即使el-form-item元素被隐藏了,它的校验也会生效。
    原因分析
    【1】使用v-if:element在对form表单中带有prop属性的子组件进行校验规则绑定时,是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的,导致了v-if内的表单项,由于在mounted时期没有进行渲染,所以规则也没有绑定上,因此初始化时不符合显示条件的不会生成规则,导致后面切换条件,显示的输入框的校验不会生效。
    【2】使用v-show:初始化时会生成所有的规则,即使隐藏了也会进行规则校验。

    3、解决

    查阅相关资料后,发现一个简单粗暴的方法,即给在v-if的元素上加上key值,便能解决v-if带来的表单校验失效的问题,代码如下:

    <el-form-item label="收货人"
          prop="CNParty.partyDescription"
          key="CNParty.partyDescription"
          v-if="goOrder.mfOrder.bookingType == 1">
          <el-input :autosize="{ minRows: 2, maxRows: 6 }"
    	      type="textarea"
    	      v-model="goOrder.CNParty.partyDescription"
    	      name="CNParty.partyDescription">
          </el-input>
    </el-form-item>
    

    原因:因为在v-for或者v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的,所以需要添加key来做区分。

    展开全文
  • 项目中需要做打印账单等表格的功能,但是在同一个页面中存在打印按钮,需要点击打印按钮才能执行打印,这就需要实现打印所需div部分,查询资料发现有很多方法可以实现这样的功能,我选择了一种我认为是最简单的方法...

    项目中需要做打印账单等表格的功能,但是在同一个页面中存在打印按钮,需要点击打印按钮才能执行打印,这就需要实现打印所需div部分,查询资料发现有很多方法可以实现这样的功能,我选择了一种我认为是最简单的方法,隐藏不需要的内容:

    我们知道,window.print();是打印当前页面的所有内容,这样就可以通过打印前隐藏不需要打印的内容,打印后再显示内容的思路来做:

      $('.print').click(function() {
            $('.no-print').css("display","none");
            window.print();
            $('.no-print').css("display","block");
        });

     

    转载于:https://www.cnblogs.com/moumou0213/p/6868264.html

    展开全文
  • 1、给父页面跳转的地方设置事件//原来的页面上展示的信息编辑//带参数进行编辑删除//要跳转过去的页面用隐藏来代替//v-model绑定formData.name(name为需要的字段,formDataw为表格ref绑定的数据)确定取消2、JS部分...
  • HTML页面布局

    2018-12-19 14:19:18
    1.table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片等元素放入单元格中,隐藏表格边框,实现布局。也叫传统布局,主要用于广告邮件的页面,不是主流。 (1)按照设计图的尺寸设置表格的宽高以及...
  • 安卓study 2017/2/23

    2019-05-01 14:53:14
    五布局之表格布局(TableLayout):TableLayout表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。 注意:隐藏属性和收缩、拉伸属性只能放置在父类布局中。 局部...
  • 遇到客户不想要编辑之后,后台 form.render 或者table.reload 更新整个表格,想只局部更新被修改的单条数据。 将table.reload 改成 obj.update() 就好了 update()方法内部res.data为编辑后返回的data数据,注意处理...
  • Avue-curd个性化定制

    2020-10-29 18:16:43
    在使用vue(js)+elelment(ui)开发一些后台管理项目的时候,基本会用到 列表页,条件搜索(search),表格数据(table),分页,操作栏的,增、删、改、查几种操作。如下图这样的: 很多的页面都很类似,这里就给大家介绍...
  • 使用分级显示数据

    千次阅读 2013-12-19 10:55:39
    在分级显示中,表格的左侧或顶部会出现“+ 、 - 、 1 、 2 、 3 ”之类的分级符号按钮,通过点击这些按钮,就能折叠(隐藏)或展开(显示)数据了,见下图。 分级显示有两种方式,一种是在“行”中,另一种是在...
  •  7.1.1 表格的基本构成——table、tr、td 119  7.1.2 表格的标题——caption 120  7.1.3 表格的表头——th 121  7.2 设置表格基本属性 123  7.2.1 表格的宽度——width 123  7.2.2 表格的高度——height...
  • word使用技巧大全

    热门讨论 2011-03-18 20:37:53
    局部调整方法 67 三十六、自定义模板 自动生成指定的Word文件名 68 三十七、从头到脚完美:Word文档布局 69 三十八、文件夹的内容生成文件 70 三十九、参考文献的标注 70 1、如何在word文档中加进参考文献的标注 70 ...
  • 支持表格、线性、表格、直接等四种不同的动画连接方式。 优化的动画刷新,效率更高。 强大的脚本语言 强大的功能 使用VBScript作为脚本语言,VBScript脚本语言是微软VBA的一个子集。...
  • 实例198 隐藏MSHFlexGrid控件的行和列 357 实例199 动态调整MSHFlexGrid表格中字段的 顺序 358 实例200 提高数据输入速度 359 实例201 设置奇、偶行颜色不同的表格 361 实例202 在MSHFlexGrid控件中显示图片 ...
  • 实例198 隐藏MSHFlexGrid控件的行和列 357 实例199 动态调整MSHFlexGrid表格中字段的 顺序 358 实例200 提高数据输入速度 359 实例201 设置奇、偶行颜色不同的表格 361 实例202 在MSHFlexGrid控件中显示图片 ...
  • javaSE代码实例

    2016-06-21 22:30:18
    15.2.2 局部变量与局部内部类 329 15.2.3 静态方法中的局部内部类 331 15.3 静态内部类 332 15.3.1 语法规则 332 15.3.2 创建静态内部类的对象 332 15.3.3 静态/非静态内部类的区别 333 15.4 匿名内部...
  • 示例描述:本章示例展现了如何使用ASP.NET 2.0实现网络的图文验证功能 dynamicTable DOM应用实例,动态创建表格。 <br>第11章(\C11) 示例描述:本章介绍了几款比较流行的Ajax框架。 ...
  • 示例描述:本章示例展现了如何使用ASP.NET 2.0实现网络的图文验证功能 dynamicTable DOM应用实例,动态创建表格。 <br>第11章(\C11) 示例描述:本章介绍了几款比较流行的Ajax框架。 ...
  • 疯狂ios讲义源代码

    千次下载 热门讨论 2014-01-02 09:12:50
    5.4 隐藏和封装 160 5.4.1 理解封装 161 5.4.2 使用访问控制符 161 5.4.3 理解@package访问控制符 165 5.4.4 合成存取方法 166 5.4.5 使用点语法访问属性 171 5.5 键值编码(kvc)与键值监听(kvo)172 5.5.1...
  • 技巧17 让工作表永远显示表格标题行 技巧18 标题行的重复打印 技巧19 多窗口协同作业 第二篇 数据的输入和导入 第3章 数据录入技巧 技巧20 调整输入数据后的单元格指针移动方向 技巧21 在指定的单元格...
  • 实例288 仿QQ隐藏窗体 实例289 窗体百叶窗登场特效 实例290 关闭窗体打开网址 12.2 窗体与控件外观 实例291 Nimbus外观 实例292 本地系统外观 370 实例293 分割的窗体界面 实例294 圆周运动的窗体 第13章 ...
  • 实例288 仿QQ隐藏窗体 实例289 窗体百叶窗登场特效 实例290 关闭窗体打开网址 12.2 窗体与控件外观 实例291 Nimbus外观 实例292 本地系统外观 370 实例293 分割的窗体界面 实例294 圆周运动的窗体 第13章 ...
  • 实例288 仿QQ隐藏窗体 实例289 窗体百叶窗登场特效 实例290 关闭窗体打开网址 12.2 窗体与控件外观 实例291 Nimbus外观 实例292 本地系统外观 370 实例293 分割的窗体界面 实例294 圆周运动的窗体 第13章 ...
  • 实例288 仿QQ隐藏窗体 实例289 窗体百叶窗登场特效 实例290 关闭窗体打开网址 12.2 窗体与控件外观 实例291 Nimbus外观 实例292 本地系统外观 370 实例293 分割的窗体界面 实例294 圆周运动的窗体 第13章 ...
  • 实例288 仿QQ隐藏窗体 实例289 窗体百叶窗登场特效 实例290 关闭窗体打开网址 12.2 窗体与控件外观 实例291 Nimbus外观 实例292 本地系统外观 370 实例293 分割的窗体界面 实例294 圆周运动的窗体 第13章 ...
  • Java开发技术大全(500个源代码).

    热门讨论 2012-12-02 19:55:48
    errorCompoundVariable.java 错误使用局部变量示例 factorial.java 求阶乘 Fibonacci.java 求Fiblnacci数列 GcdAndGcm.java 求最大公约数和最小公倍数 errorInit.java 演示变量初始化错误的程序 integer...
  • Colorful 明月浩空 V2.7

    2019-05-26 11:13:01
    16、个性化返回顶部动画(彩蛋:如果快速移动鼠标,老鼠被唤出不会立刻隐藏,全站任意位置快速双击鼠标左键返回顶部) 17、一堆短代码 18、全站图片灯箱 19、模板后台支持模板设置 20、评论支持IP地址显示(纯真...
  • 修改高级表格支持库,增加了“边框”属性和“客户区背景颜色”属性,同时隐藏了原“客户区背景颜色()”方法。 5. 修改数值计算支持库,解决大数导出整数时丢失正负号的BUG。 6. 修改数据库支持库中个别文字说明。...
  • delphi 开发经验技巧宝典源码

    热门讨论 2010-08-12 16:47:23
    0024 声明局部变量、类变量和全局变量 19 0025 有效利用条件语句和嵌套条件语句 20 0026 有效利用循环语句和嵌套循环语句 21 0027 使用GoTo跳转语句 21 0028 有效使用Case Else语句 22 0029 保证数组循环...
  • 0024 声明局部变量、类变量和全局变量 19 0025 有效利用条件语句和嵌套条件语句 20 0026 有效利用循环语句和嵌套循环语句 21 0027 使用GoTo跳转语句 21 0028 有效使用Case Else语句 22 0029 保证数组循环...

空空如也

空空如也

1 2 3 4 5 6
收藏数 113
精华内容 45
关键字:

表格局部隐藏