紅色部分
$("#jstree_demo")
.jstree({
"core" : {
"animation" : 0,
"check_callback" : true,
'force_text' : true,
"themes" : { "stripes" : true },
// so that create works
"check_callback" : true,
'data' : function (obj, callback) {
var jsonstr="[]";
var jsonarray = eval('('+jsonstr+')');
$.ajax({
type: "POST",
url:url,
dataType:"json",
async: false,
success:function(result) {
var arrays= result;
for(var i=0 ; i<arrays.length; i++){
console.log(Object.getOwnPropertyNames(arrays[i]).sort());
var arr = {
"id":arrays[i].id,
"parent":arrays[i].pid==""?"#":arrays[i].pid,
"text":arrays[i].name,
"type":arrays[i].iconSkin,
"state": {"opened" : true}
//"state": {"selected":true}
}
jsonarray.push(arr);
}
}
});
callback.call(this, jsonarray);
}
},
"plugins" : [ "search", "state", "types", "wholerow","checkbox" ]
});
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
解決火狐瀏覽隱藏不了滾動條問題
1.里層容器的width多17px，外層容器溢出隱藏，能兼容各個瀏覽器
|
1
2
3
4
5
6
7
8
9
10
11
|
.outContainer {
width:350px;
height:300px;
overflow: hidden;
}
.inContainer {
height:300px;
width: 367px;
overflow-x:hidden;
overflow-y:scroll;
}
|
2.設置 scrollbar-width: none，可兼容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.outContainer {
width:350px;
height:300px;
overflow: hidden;
}
.inContainer {
height:300px;
width: 350px;
overflow-x:hidden;
overflow-y:scroll;
scrollbar-width: none;
}
/* 使用偽類選擇器 ::-webkit-scrollbar ,兼容chrome和safari瀏覽器 */
.inContainer::-webkit-scrollbar{
display: none;
}
/*兼容火狐*/
.inContainer {
scrollbar-width: none;
}
/* 兼容IE10+ */
.inContainer {
-ms-overflow-style: none;
}
|
html如下
|
1
2
3
4
5
6
7
8
9
|
<body>
<div class="outContainer" >
<div class="inContainer">
<div class="inContent" ></div>
<div class="inContent inContent2"></div>
<div class="inContent" ></div>
</div>
</div>
</body>
|
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
<script> $('#datatable').DataTable({ language: { "sProcessing": "處理中...", "sLengthMenu": "顯示 _MENU_ 項結果", "sZeroRecords": "沒有匹配結果", "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項", "sInfoFiltered": "(由 _MAX_ 項結果過濾)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中數據為空", "sLoadingRecords": "載入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首頁", "sPrevious": "上頁", "sNext": "下頁", "sLast": "末頁" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } } }); }); </script>
<script>
$('#datatable').DataTable({
"columnDefs": [
{
render: function (data, type, full, meta) {
return "<div style='white-space:nowrap;float:right'>" + data + "</div>";
},
targets: [2,3,4,5,6]
},
],
});
</script>
三、修改表格數據后，靜態刷新表格數據不跳轉
dataTable.ajax.reload(null, false);
// 重載所有接口數據，返回到第一頁 dataTable.ajax.reload();
ajax.reload( callback, resetPaging )
里面有二個參數：
callback ：當服務器返回數據并重繪完畢時執行此回調方法，回調方法返回的是服務器返回的數據
resetPaging： 重置（默認或者設置為true）或者保持分頁信息（設置為false）
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用漂亮的前端表格直觀顯示數據
表格顯示
設置一個table
-
<table id="table_id" class="display">
-
<thead>
-
<tr>
-
<th>Column 1</th>
-
<th>Column 2</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>Row 1 Data 1</td>
-
<td>Row 1 Data 2</td>
-
</tr>
-
<tr>
-
<td>Row 2 Data 1</td>
-
<td>Row 2 Data 2</td>
-
</tr>
-
</tbody>
-
</table>
這個是JqueryTable必要的靜態資源
-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
-
-
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
如果你使用了js， 那么還需要引入jquery.js
-
$(document).ready( function () {
-
$('#table_id').DataTable();
-
} );
-
<table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
-
<thead>
-
<tr>
-
<th width="10%">用戶名</th>
-
<th width="10%">姓名</th>
-
<th width="8%">性別</th>
-
<th width="10%">手機號</th>
-
<th width="5%">工作年限</th>
-
<th width="12%">教員類型</th>
-
<th width="15%">角色</th>
-
<th width="10%">備注</th>
-
<th width="12%">操作</th>
-
</tr>
-
</thead>
-
</table>
ajax 發送請求， 接受表格數據，再填寫進去
-
initGrantedCoachGrid:function(){
-
selectedUserId =[];
-
if(grantedCoachGrid){
-
grantedCoachGrid.ajax.url(
-
"course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "").load();
-
} else {
-
grantedCoachGrid = $('#tbl_grantedCoach')
-
.DataTable(
-
{
-
"lengthMenu" : [ [ 10, 20, 30 ],
-
[ 10, 20, 30 ] // change per page
-
// values here
-
],
-
"ordering":false,
-
"retrieve":true ,
-
"bDestory" :true,
-
"pageLength": 10,
-
"bAutoWidth" : false,
-
"ajax" : {
-
"url" : "course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "",
-
"type" : "get",
-
"cache" : false,
-
"contentType" : "application/json; charset=utf-8",
-
"dataSrc" : ""
-
},
-
"rowCallback" : function(row, data) {
-
selectedUserId.push(data.userId);
-
},
-
-
"aoColumnDefs" : [ {
-
sDefaultContent : '',
-
aTargets : [ '_all' ]
-
} ],
-
// 填入列數據
-
"columns" : [
-
-
{
-
"data" : "loginName"
-
},
-
{
-
"data" : "userFullName"
-
},
-
-
{
-
"data" : "gender",
-
"mRender" : function(data,
-
type, full) {
-
if (data == "M") {
-
return "男";
-
} else if (data == "F") {
-
return "女";
-
}
-
}
-
},
-
{
-
"data" : "mobilePhone"
-
},
-
{
-
"data" : "workYear"
-
},
-
{ "data": "coachType" , "mRender":function(data,type,full){
-
if(data=="0")
-
{
-
data="理論培訓";
-
}else if(data=="1"){
-
data="實習培訓";
-
}else{
-
data="理論培訓+實習培訓";
-
}
-
return data;
-
}},
-
-
{
-
"data" :function( row, type, val, meta ){
-
-
return row.userRoles[0].roleName;
-
-
}
-
},
-
{
-
"data" : "remark"
-
},
-
{
-
"data" : null,
-
"mRender" : function(data,
-
type, full) {
-
return "";
-
}
-
}
-
-
],
-
"oLanguage" : {
-
"sProcessing" : "正在加載中......",
-
"sLengthMenu" : "每頁顯示_MENU_條記錄",
-
"sZeroRecords" : "對不起，查詢不到相關數據！",
-
"sEmptyTable" : "無數據存在！",
-
"sInfo" : "當前顯示_START_到_END_條，共_TOTAL_條記錄",
-
"sInfoFiltered" : "數據表中共為 _MAX_ 條記錄",
-
"sSearch" : "",
-
"oPaginate" : {
-
"sFirst" : "首頁",
-
"sPrevious" : "上一頁",
-
"sNext" : "下一頁",
-
"sLast" : "末頁"
-
}
-
}, // 多語言配置
-
"stateSave" : true
-
// save the state of a table
-
});
-
}
-
-
}
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1-原生JS
設置屬性 .setAttribute("屬性","值") 獲取屬性 .getAttribute("屬性")
2-jquery
設置屬性 .attr("屬性","值") 獲取屬性 .attr("屬性")
下面通過一個例子介紹一下，如何獲取和設置元素的屬性；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>獲取元素屬性</title> <style> * { margin:0; padding:0; list-style:none; } </style> </head> <body> <div id="mayouchen"> <div style="background:red;height:20px">元素屬性獲取</div> <div class="test1"> <p id="demo">點擊按鈕來設置按鈕的 type,id,class 屬性。</p> <input value="OK" class="mayouchen"> <button onclick="mayouchen1()">獲取元素屬性</button> </div> <div style="background:green;height:20px">自定義屬性獲取</div> <div class="test2"> <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被獲取的元素</div> <button onclick="mayouchen2()">獲取自定義元素屬性</button> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { }); function mayouchen1() { document.getElementsByTagName("INPUT")[0].setAttribute("type", "button"); document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen"); document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1"); document.getElementsByTagName("INPUT")[0].getAttribute("id"); document.getElementsByTagName("INPUT")[0].getAttribute("class"); console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id")); console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class")); } function mayouchen2() { var tree = document.getElementById("tree"); //getAttribute()取值屬性 console.log("data-leaves======" + tree.getAttribute("data-leaves")); console.log("data-plant-height===============" + tree.getAttribute("data-plant-height")); //setAttribute()賦值屬性 tree.setAttribute("data-come", "49"); //data-前綴屬性可以在JS中通過dataset取值，更加方便 console.log("通過dataset獲得data-leaves====" + tree.dataset.leaves); console.log("通過dataset獲得data-plant-height====" + tree.dataset.plantHeight); //注意在這里連字符的訪問時，屬性要寫成駝峰形式 } </script> </body> </html>
上面有兩個test, test1是測試元素常見屬性，test2是測試元素自定義屬性
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網頁使用iframe嵌入網頁時，有時候需要動態處理src的值，而不是寫死的，所以我們需要知道如何給iframe src賦值，通常是使用js或jquery來實現。本文介紹js和jquery給iframe src賦值的3種方法。
這是最常用的js給iframe src賦值的方法，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <iframe frameborder="1" id="barframe" ></iframe> </body> </html> <script type="text/javascript"> document.getElementById("barframe").src = "http://localhost/EXAMPLE/iframe/example.html"; </script>
通過js創建一個iframe元素，然后再給該元素src賦值，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> <script type="text/javascript"> var myIframe = document.createElement('iframe'); myIframe.src = 'http://localhost/EXAMPLE/iframe/example.html'; document.body.appendChild(myIframe); </script>
最后一句 document.body.appendChild(myIframe); 是表示在 body 里添加剛定義的 myIframe 這個控件。
我們也可以把該iframe添加到某一個div容器里，寫法如下：document.getElementById("div1").appendChild(myIframe); ， div1是該div容器的id 。
上面兩個方法都是用js來實現的，其實我們也可以用jquery來實現，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.webkaka.com/script/jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#barframe').attr('src', 'http://localhost/EXAMPLE/iframe/example.html'); }); </script> </head> <body> <iframe frameborder="1" id="barframe"></iframe> </body> </html>
特別注意，上述jquery代碼不能缺少 $(document).ready(); ，否則iframe src賦值失敗，除非把jquery的代碼放在 <iframe ... 的html代碼后面。此外，還需要在 <head></head> 里引用 jquery.js 文件
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
<script type="text/javascript">
function delElement(obj){
obj.parentNode.removeChild(obj);
}
</script>
<ul>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
</ul>
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>
<!-- 3.0 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<ul id="listproject" class="list-group">
<script type="text/javascript">
var JSarray = new Array();
JSarray[0] = "array0";
JSarray[1] = "array1";
JSarray[2] = "array2";
JSarray[3] = "array3";
JSarray[4] = "array4";
for(var i = 0;i<5;i++){
$("#listproject").append("<li id=li"+i+">"+JSarray[i]+"</li>"); //在ul標簽上動態添加li標簽
$("#li"+i).attr("class",'list-group-item'); //為li標簽添加class屬性
}
$('li').on('click',function(){ //綁定事件
alert("事件綁定成功！");
});
</script>
</body>
</html>
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1、用JavaScript + html + css 實現，選項卡操作；
2、分析：
A、用 html + css 實現布局(盒子的布置，空間的分配等)；
B、用 JavaScript 中的 DOM 操作，實現點擊不同選項顯示不同標題欄的功能；
1、運行軟件VScode，親測可實現；
2、運行代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; font-family: '微軟雅黑'; font-size: 14px; } #container { width: 398px; margin: 100px auto; } #container a { display: block; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; color: #333333; text-decoration: none; } #container a:hover { /* 鼠標放在 a 的標簽上，其文字將顯示為：紅色； */ color: #ff4400; } .content { width: 355px; height: 140px; text-align: center; border-right: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; padding: 30px 0 0 40px; display: none; } .clear { clear: left; } #container a.on { /* 對a標簽中的類名為：on 的標簽進行操作； */ background: #ff4400; color: #fff; } </style> </head> <body> <div id="container"> <a href="#" class="on" >充話費</a> <!-- 類為：on 的 a 標簽； --> <a href="#" >充流量</a> <a href="#" >充固話</a> <a href="#" style="border-right: 1px solid #ff4400;">充寬帶</a> <!-- style 操作目的：使得顯示的盒子最右邊有邊框； --> <div class="clear"></div> <div class="content" style="display: block;"> <!-- style 操作目的：使第一個圖片在初始狀態時，能顯示出來； --> <img src="images/1.png" width="355px"/> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/2.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/3.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/4.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> </div> <script> var as = document.getElementsByTagName('a'); //通過 DOM 操作，拿到標簽為 a 的所有的元素(是個集合)； var divs = document.getElementsByClassName('content');//通過 DOM 操作，拿到類為 content 的所有的元素(是個集合)； for(var i=0; i<as.length; i++) { as[i].index = i; //給拿到的每個元素對象添加索引屬性； (由于通過 DOM 操作拿到的元素是對象，因此可以添加屬性值)； as[i].onclick = function() { //給 as集合 綁定單擊事件； for(var j=0; j<as.length; j++) { as[j].className = ''; //將 as集合 的所有元素的類名全部取消； (此時用的思想為：排他思想；) divs[j].style.display = 'none'; //將 divs集合 的所有元素全設置成不顯示狀態； } this.className = 'on'; //僅將被單擊的元素的類名設置為：on，以便執行在 css 中的相關操作； divs[this.index].style.display = 'block'; //并將被單擊的元素的相關圖片設置為：block狀態；(即：顯示出來；) } } </script> </body> </html>
3、結果展示：
A、默認的顯示結果：
B、點擊 ‘充流量’ 后的顯示結果：
C、點擊 ‘充固話’ 后的顯示結果：
D、點擊 ‘充寬帶’ 后的顯示結果：
4、可能存在的問題：
A 、如果自己也加載了圖片信息，仍然不能顯示該結果，可以直接下載我傳上去的文檔(可能解釋的更詳細)，可以直接在 VScode 等其他軟件上加載運行；
地址為：
https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501
哪里有不對或不合適的地方，還請大佬們多多指點和交流！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
代碼
<el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="標題2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form>
原因：
因為form-item綁定驗證事件是在mounted中進行的，規則變化后沒有進行重新綁定驗證事件，v-if渲染組件節點diff后被復用了，所以驗證也就自然失效了
參考回答：v-if案例解析（element-ui form-item 結合 v-if 動態生成rule規則\表單元素，表單無法驗證問題剖析 ）
感興趣的小伙伴可以學習一下
解決方案：
el-form-item添加一個key屬性區分
<el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item key="1" label="標題2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form>
如果v-if渲染的目標是整個表單，則在form標簽寫入key
el-form-item中寫rules
<el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="標題2" prop="requestData" :rules="{ required: true, message: 'xxx不能為空', trigger: 'blur' }"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form>
:rules="{ required: true, message: ‘xxx不能為空’, trigger: ‘blur’ }"
這里需要注意JavaScript中的單引號''與雙引號""的使用規范
還有很多方法可以解決這個問題，這里只記錄我用過的其中兩個方法。有其他解決方法的同學歡迎留言討論！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn