Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 三级国产精品一区二区,国产精品视频2021,亚洲国产中文在线 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          web前端基礎(chǔ)教程 用layui獲取checkbox
          
        
           
          
	
	
          
		web前端基礎(chǔ)教程 用layui獲取checkbox復(fù)選框值
          
                        

          eb前端教程,前端開(kāi)發(fā)知識(shí)點(diǎn)
          layui更多是面向于后端開(kāi)發(fā)者，所以在組織形式上依然采用了幾年前的以瀏覽器為宿主的類(lèi)AMD模塊管理方式，卻又并非受限于CommonJS的那些條條框框，它擁有自己的模式，更加輕量和簡(jiǎn)單。
          獲取layui表單復(fù)選框已選中的數(shù)據(jù):
          　　html
          　　<!DOCTYPEhtml>
          　　<html>
          　　<head>
          　　<metacharset="utf-8">
          　　<title>layui.form.checkbox獲取選中</title>
          　　<linkrel="stylesheet"href="layui/css/layui.css"media="all">
          　　</head>
          　　<body>
          　　<formclass="layui-form"><!--提示：如果你不想用form，你可以換成div等任何一個(gè)普通元素-->
          　　<divclass="layui-form-item">
          　　<labelclass="layui-form-label">復(fù)選框</label>
          　　<divclass="layui-input-block">
          　　<inputtype="checkbox"name="CSDN"lay-filter="like"title="復(fù)選框一"value="dongsir">
          　　<inputtype="checkbox"name="CSDN"lay-filter="like"title="復(fù)選框二"value="董先生">
          　　</div>
          　　</div>
          　　<divclass="layui-form-item">
          　　<labelclass="layui-form-label">開(kāi)關(guān)關(guān)</label>
          　　<divclass="layui-input-block">
          　　<inputtype="checkbox"name="switch"lay-skin="switch"value="董輝">
          　　</div>
          　　</div>
          　　<divclass="layui-form-item">
          　　<labelclass="layui-form-label">開(kāi)關(guān)開(kāi)</label>
          　　<divclass="layui-input-block">
          　　<inputtype="checkbox"name="switch"checkedlay-skin="switch"value="董先生的CSDN">
          　　</div>
          　　</div>
          　　<divclass="layui-form-item">
          　　<divclass="layui-input-block">
          　　<buttonclass="layui-btn"lay-submitlay-filter="*">立即提交</button>
          　　</div>
          　　</div>
          　　</form>
          　　<scriptsrc="layui/layui.js"></script>
          　　JS
          　　layui.use('form',function(){
          　　varform=layui.form,
          　　$=layui.$;
          　　//各種基于事件的操作。
          　　form.on('submit(*)',function(data){
          　　//將頁(yè)面全部復(fù)選框選中的值拼接到一個(gè)數(shù)組中
          　　vararr_box=[];
          　　$('input[type=checkbox]:checked').each(function(){
          　　arr_box.push($(this).val());
          　　});
          　　//數(shù)組
          　　console.log(arr_box);
          　　//["董先生的CSDN"]
          　　returnfalse;//阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。
          　　});
          　　});
          　　如果需要字符串的話，再將數(shù)組轉(zhuǎn)為字符串
          　　console.log(arr_box.toString());
          　　//dongsir,董先生,董先生的CSDN
          　　如果需要自定義分割字符的字符串
          　　console.log(arr_box.join(","));
          　　//dongsir,董先生,董先生的CSDN
          ?layui，是一款采用自身模塊規(guī)范編寫(xiě)的前端UI框架，遵循原生Html/CSS/JS的書(shū)寫(xiě)與組織形式，門(mén)檻極低，拿來(lái)即用。其外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合界面的快速開(kāi)發(fā)。
          以上就是酷仔今日整理發(fā)布的“web前端基礎(chǔ)教程 用layui獲取checkbox復(fù)選框值”一文，希望為正在學(xué)習(xí)Web前端layui的朋友提供參考.
          言
          在之前的一篇文章《默認(rèn)的input標(biāo)簽太丑？教你如何使用CSS寫(xiě)出帶動(dòng)畫(huà)的樣式》中有講過(guò)如何實(shí)現(xiàn)一個(gè)漂亮的input標(biāo)簽樣式。
          既然已經(jīng)折騰了，今天這篇文章我們就繼續(xù)折騰，看看如何通過(guò)CSS3實(shí)現(xiàn)一個(gè)帶動(dòng)畫(huà)的checkbox樣式？
          CSS3
          感興趣的可以自行去github上看源文件，地址如下：
          https://github.com/zhouxiongking/article-pages/blob/master/articles/beautifulCheckbox/beautifulCheckbox.html
          checkbox
          checkbox作為多選框，在form表單中的使用頻率是非常高的，例如問(wèn)卷調(diào)查的多選題，個(gè)人興趣愛(ài)好的選擇時(shí)都會(huì)用到多選框。
          而瀏覽器默認(rèn)的checkbox樣式都很丑，看起來(lái)就是一個(gè)小小的方框，雖然Bootstrap已經(jīng)有好看的checkbox樣式，但是它不支持動(dòng)畫(huà)，在交互上仍然存在缺陷，所以我們就試圖自己寫(xiě)出一個(gè)帶動(dòng)畫(huà)的checkbox效果。
          首先我們來(lái)看看checkbox的動(dòng)態(tài)效果圖（中間的黑色圓圈實(shí)際為錄制GIF圖時(shí)產(chǎn)生的，請(qǐng)忽略）
          checkbox效果圖
          具體組成
          接下來(lái)我們具體分析下頁(yè)面的元素組成，主要包括以下部分。
          1. 默認(rèn)的checkbox標(biāo)簽，將其display設(shè)置為none，隱藏起來(lái)。
          2. label標(biāo)簽，表現(xiàn)為實(shí)際顯示的動(dòng)態(tài)選中和未選中效果。
          我們需要達(dá)到的效果是，在未選中checkbox時(shí)，默認(rèn)為灰色的邊框，白色的背景；在選中checkbox時(shí)，改變背景色，出現(xiàn)白色的打勾動(dòng)畫(huà)效果。
          代碼組成
          在這部分，我們來(lái)具體分析下頁(yè)面的代碼組成。
          • HTML
          首先是頁(yè)面的HTML部分代碼，如上一部分所示，頁(yè)面其實(shí)只有兩個(gè)元素組成，這兩個(gè)元素放在一個(gè)容器下，故HTML代碼如下所示。
          HTML部分代碼
          • CSS
          我們來(lái)看看CSS部分的代碼，因?yàn)镃SS部分代碼比較多，我們一一來(lái)分析。
          首先是外層container的樣式，同時(shí)對(duì)頁(yè)面的html和body也做一些簡(jiǎn)單處理，代碼如下所示。
          container樣式
          其次是checkbox標(biāo)簽的樣式，因?yàn)樵腸heckbox除了在傳輸數(shù)據(jù)時(shí)有用處，在頁(yè)面呈現(xiàn)上并沒(méi)有作用，故設(shè)置display:none;將其隱藏。
          checkbox樣式
          然后是最重要的label部分，在未點(diǎn)擊之前l(fā)abel呈現(xiàn)一個(gè)正方形，有基本的樣式。
          基本樣式
          在點(diǎn)擊方形框后，出現(xiàn)的對(duì)勾是通過(guò)偽元素::before和::after實(shí)現(xiàn)的，對(duì)勾實(shí)際為兩個(gè)矩形拼接而成，左側(cè)的矩形用::after元素表示，右側(cè)的矩形用::before元素表示。兩者的通用樣式通過(guò)如下代碼實(shí)現(xiàn)。
          偽元素實(shí)現(xiàn)
          然后是針對(duì)::before和::after所特有的樣式，因?yàn)閮烧叩奈恢煤托D(zhuǎn)的角度不同，代碼也會(huì)出現(xiàn)差異。
          特有樣式
          然后是定義的打鉤的動(dòng)畫(huà)效果，這里使用keyframes關(guān)鍵字定義，考慮到瀏覽器兼容性，定義的動(dòng)畫(huà)具有不同的前綴。定義的動(dòng)畫(huà)也包括兩部分，首先是右側(cè)的矩形動(dòng)畫(huà)效果。
          右側(cè)矩形動(dòng)畫(huà)效果
          然后是左側(cè)矩形的動(dòng)畫(huà)效果，同樣考慮到瀏覽器的兼容性，樣式代碼如下。
          左側(cè)矩形動(dòng)畫(huà)
          至此，所有代碼都已講解完畢，如果運(yùn)行之后就會(huì)看到文章開(kāi)始的動(dòng)畫(huà)效果。
          結(jié)束語(yǔ)
          本篇文章主要講的是如何使用自定義的動(dòng)畫(huà)完成checkbox效果，感興趣的可以直接去github上看源文件代碼，后續(xù)會(huì)寫(xiě)一個(gè)跟開(kāi)關(guān)switch有關(guān)的文章，敬請(qǐng)期待~
          ue基于t-ui的三級(jí)CheckBox復(fù)選框elemen
          出自：http://www.cnblogs.com/wangmingcong/p/9781775.html?utm_source=tuicool&utm_medium=referral
          最近vue項(xiàng)目需要用到三級(jí)CheckBox復(fù)選框，需要實(shí)現(xiàn)全選反選不確定三種狀態(tài)。但是element-ui table只支持多選行，并不能支持三級(jí)及以上的多選，所以寫(xiě)了這篇博客以后學(xué)習(xí)使用。
          效果圖預(yù)覽：
          首先是頁(yè)面布局，當(dāng)然也可已使用table，但是自己用flex布局后面更容易增刪改查其他功能
           1 <div class="deliverySetting-table">
 2 <div class="table-head">
 3 <div class="selection">
 4 <el-checkbox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange"></el-checkbox>
 5 </div>
 6 <div class="width185">分區(qū)名稱</div>
 7 <div class="width265">國(guó)家</div>
 8 <div>派送商</div>
 9 </div>
10 <div class="table-body" v-for="(partition,partitionIndex) in distributorsInfo" :key="partitionIndex">
11 <div class="selection">
12 <p><el-checkbox :indeterminate="partition.indeterminate" v-model="partition.selected" @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)" :key="partitionIndex"></el-checkbox></p>
13 </div>
14 <div class="width185"><p>{{ partition.partitionName }}</p></div>
15 <div class="width265">
16 <el-checkbox v-for="country in partition.country" v-model="country.selected" @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)" :label="country" :key="country.id">{{country.fieldName}}</el-checkbox>
17 </div>
18 <div>
19 <p v-for="(item,index) in partition.country" :key="index">
20 {{ item.distributors }}
21 </p>
22 </div>
23 </div>
24 </div>

          接下來(lái)是數(shù)據(jù)結(jié)構(gòu)，自定義的，可以更后臺(tái)商議，但是字段indeterminate（顯示不確定狀態(tài)~符號(hào)），selected（CheckBox選中狀態(tài)）一定要讓后臺(tái)加入到data中，其他可以按照后臺(tái)數(shù)據(jù)來(lái)。
           2 distributorsInfo:[
 3 { partitionName:'1區(qū)',selected:false,partitionId:1,isIndeterminate:false,
 4 country:[
 5 { id: "1",fieldName: "奧地利",fieldTableName: "奧地利",distributors:'UPS',selected: false},
 6 { id: "2",fieldName: "芬蘭",fieldTableName: "芬蘭",distributors:'UPS',selected: false},
 7 { id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false},
 8 { id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false},
 9 { id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false},
10 { id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},]
11 },
12 { partitionName:'2區(qū)',selected:false,partitionId:2,isIndeterminate:false,
13 country:[
14 { id: "5",fieldName: "丹麥",fieldTableName: "單買(mǎi)",distributors:'',selected: false},
15 { id: "6",fieldName: "法國(guó)",fieldTableName: "法國(guó)",distributors:'',selected: false},]
16 },
17 { partitionName:'3區(qū)',selected:false,partitionId:3,isIndeterminate:false,
18 country:[
19 { id: "7",fieldName: "德國(guó)",fieldTableName: "德國(guó)",distributors:'YODEL',selected: false},
20 { id: "8",fieldName: "瑞士",fieldTableName: "瑞士",distributors:'DPD',selected: false}]
21 }
22 ],
23 ischeckAll:false,//一級(jí)全選狀態(tài)

          因?yàn)榇颂幨侨?jí)復(fù)選，所以函數(shù)為三個(gè)change，具體有詳細(xì)注釋可以查看
           1 handleCheckAllChange(e){//一級(jí)change事件
 2 this.ischeckAll=e
 3 if(e==true){
 4 this.indeterminate=false
 5 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //二級(jí)全選反選不確定
 6 this.distributorsInfo[i].selected=e
 7 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
 8 this.distributorsInfo[i].country[j].selected=e
 9 }
10 }
11 }else{
12 this.indeterminate=false
13 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //三級(jí)全選反選不確定
14 this.distributorsInfo[i].selected=e
15 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
16 this.distributorsInfo[i].country[j].selected=e
17 }
18 }
19 }
20 },
21 handleCheckedCountryAllChange(index, topId, e){//二級(jí)change事件
22 this.distributorsInfo[index].selected=e//二級(jí)勾選后，子級(jí)全部勾選或者取消
23 if(e==false) this.distributorsInfo[index].indeterminate=false //去掉二級(jí)不確定狀態(tài)
24 var childrenArray=this.distributorsInfo[index].country
25 if(childrenArray)
26 for(var i=0,len=childrenArray.length; i<len; i++)
27 childrenArray[i].selected=e
28 
29 this.getIsCheckAll()
30 },
31 handleCheckedCountryChange(topIndex, sonId, topId, e){//三級(jí)change事件
32 var childrenArray=this.distributorsInfo[topIndex].country
33 var tickCount=0, unTickCount=0, len=childrenArray.length
34 for(var i=0; i < len; i++){
35 if(sonId==childrenArray[i].id) childrenArray[i].selected=e
36 if(childrenArray[i].selected==true) tickCount++
37 if(childrenArray[i].selected==false) unTickCount++
38 }
39 if(tickCount==len) {//三級(jí)級(jí)全勾選
40 this.distributorsInfo[topIndex].selected=true 
41 this.distributorsInfo[topIndex].indeterminate=false
42 } else if(unTickCount==len) {//三級(jí)級(jí)全不勾選
43 this.distributorsInfo[topIndex].selected=false 
44 this.distributorsInfo[topIndex].indeterminate=false
45 } else {
46 this.distributorsInfo[topIndex].selected=false
47 this.distributorsInfo[topIndex].indeterminate=true //添加二級(jí)不確定狀態(tài)
48 }
49 
50 this.getIsCheckAll()
51 },
52 getIsCheckAll(){
53 var tickCount=0, unTickCount=0, ArrLength=this.distributorsInfo.length
54 for(var j=0; j<ArrLength; j++){//全選checkbox狀態(tài)
55 if(this.distributorsInfo[j].selected==true) tickCount++
56 if(this.distributorsInfo[j].selected==false) unTickCount++
57 }
58 if(tickCount==ArrLength) {//二級(jí)全勾選
59 this.ischeckAll=true
60 this.indeterminate=false
61 } else if(unTickCount==ArrLength) {//二級(jí)全不勾選
62 this.ischeckAll=false
63 this.indeterminate=false
64 } else {
65 this.ischeckAll=false
66 this.indeterminate=true //添加一級(jí)不確定狀態(tài)
67 }
68 },

          以下是頁(yè)面完整組件代碼可以使用預(yù)覽
           1 <template>
 2 <div class="deliverySetting">
 3 <div class="deliverySetting-btn">
 4 <div class="tabs-btn ac">
 5 <input type="button" value="分配派送商" @click="showSetDistributorDailog">
 6 </div>
 7 <div class="tabs-btn ac">
 8 <input type="button" value="取消分配" @click="showCancelDistributorDailog">
 9 </div>
 10 </div>
 11 
 12 <div class="deliverySetting-table">
 13 <div class="table-head">
 14 <div class="selection">
 15 <el-checkbox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange"></el-checkbox>
 16 </div>
 17 <div class="width185">分區(qū)名稱</div>
 18 <div class="width265">國(guó)家</div>
 19 <div>派送商</div>
 20 </div>
 21 <div class="table-body" v-for="(partition,partitionIndex) in distributorsInfo" :key="partitionIndex">
 22 <div class="selection">
 23 <p><el-checkbox :indeterminate="partition.indeterminate" v-model="partition.selected" @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)" :key="partitionIndex"></el-checkbox></p>
 24 </div>
 25 <div class="width185"><p>{{ partition.partitionName }}</p></div>
 26 <div class="width265">
 27 <el-checkbox v-for="country in partition.country" v-model="country.selected" @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)" :label="country" :key="country.id">{{country.fieldName}}</el-checkbox>
 28 </div>
 29 <div>
 30 <p v-for="(item,index) in partition.country" :key="index">
 31 {{ item.distributors }}
 32 </p>
 33 </div>
 34 </div>
 35 </div>
 36 
 37 <!-- 分配派送商dailog -->
 38 <el-dialog title="分配派送商" :visible.sync="setDistributorDailog" width="480px">
 39 <el-form :model="distributorForm" :rules="rules" class="setDistributorDailog">
 40 <el-form-item label="派送代理商" label-width="120px">
 41 <el-input v-model="distributorForm.vendorName" auto-complete="off" placeholder="請(qǐng)輸入供應(yīng)商名稱"></el-input>
 42 </el-form-item>
 43 <el-form-item label="末端派送商" prop="senderName" label-width="120px">
 44 <el-select v-model="distributorForm.senderName"
 45 filterable
 46 allow-create
 47 default-first-option
 48 placeholder="請(qǐng)選派送商名稱">
 49 <el-option label="派送商1" value="shanghai"></el-option>
 50 <el-option label="派送商2" value="beijing"></el-option>
 51 </el-select>
 52 </el-form-item>
 53 <el-form-item label="派送商官網(wǎng)" prop="website" label-width="120px">
 54 <el-input v-model="distributorForm.website" auto-complete="off" placeholder="請(qǐng)輸入派送商官網(wǎng)"></el-input>
 55 </el-form-item>
 56 </el-form>
 57 <div slot="footer" class="dialog-footer">
 58 <el-button @click="setDistributorDailog=false">取 消</el-button>
 59 <el-button type="primary" @click="setDistributorDailog=false">確 定</el-button>
 60 </div>
 61 </el-dialog>
 62 
 63 <!-- 取消分配派送商 -->
 64 <el-dialog title="停止提示" :visible.sync="cancelDistributorDailog" :modal="false" width="480px" custom-class="stop-coupon-dialog">
 65 <p><br></p>
 66 <p class="ac f16">您確定要取消對(duì)的派送分配嗎？</p>
 67 <p><br></p>
 68 <span slot="footer" class="dialog-footer">
 69 <el-button @click="cancelDistributorDailog=false">取 消</el-button>
 70 <el-button type="primary" @click="cancelDistributorDailog=false">確 定</el-button>
 71 </span>
 72 </el-dialog>
 73 </div>
 74 </template>
 75 <script>
 76 export default {
 77 name:'deliverySetting',
 78 components: {
 79 },
 80 props:{
 81 },
 82 data() {
 83 return {
 84 distributorsInfo:[
 85 { partitionName:'1區(qū)',selected:false,partitionId:1,isIndeterminate:false,
 86 country:[
 87 { id: "1",fieldName: "奧地利",fieldTableName: "奧地利",distributors:'UPS',selected: false},
 88 { id: "2",fieldName: "芬蘭",fieldTableName: "芬蘭",distributors:'UPS',selected: false},
 89 { id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false},
 90 { id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false},
 91 { id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false},
 92 { id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},]
 93 },
 94 { partitionName:'2區(qū)',selected:false,partitionId:2,isIndeterminate:false,
 95 country:[
 96 { id: "5",fieldName: "丹麥",fieldTableName: "單買(mǎi)",distributors:'',selected: false},
 97 { id: "6",fieldName: "法國(guó)",fieldTableName: "法國(guó)",distributors:'',selected: false},]
 98 },
 99 { partitionName:'3區(qū)',selected:false,partitionId:3,isIndeterminate:false,
100 country:[
101 { id: "7",fieldName: "德國(guó)",fieldTableName: "德國(guó)",distributors:'YODEL',selected: false},
102 { id: "8",fieldName: "瑞士",fieldTableName: "瑞士",distributors:'DPD',selected: false}]
103 }
104 ],
105 ischeckAll:false,//一級(jí)全選狀態(tài)
106 setDistributorDailog:false,
107 cancelDistributorDailog:false,
108 distributorForm:{
109 vendorName:'',
110 senderName:''
111 },
112 indeterminate:false,
113 rules: {
114 senderName: [{ required: true, message: '字段不能為空',trigger: 'blur'}],
115 website: [{ required: true, message: '字段不能為空',trigger: 'blur'}],
116 },
117 }
118 },
119 computed: {
120 },
121 methods: {
122 handleCheckAllChange(e){//一級(jí)change事件
123 this.ischeckAll=e
124 if(e==true){
125 this.indeterminate=false
126 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //二級(jí)全選反選不確定
127 this.distributorsInfo[i].selected=e
128 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
129 this.distributorsInfo[i].country[j].selected=e
130 }
131 }
132 }else{
133 this.indeterminate=false
134 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //三級(jí)全選反選不確定
135 this.distributorsInfo[i].selected=e
136 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
137 this.distributorsInfo[i].country[j].selected=e
138 }
139 }
140 }
141 },
142 handleCheckedCountryAllChange(index, topId, e){//二級(jí)change事件
143 this.distributorsInfo[index].selected=e//二級(jí)勾選后，子級(jí)全部勾選或者取消
144 if(e==false) this.distributorsInfo[index].indeterminate=false //去掉二級(jí)不確定狀態(tài)
145 var childrenArray=this.distributorsInfo[index].country
146 if(childrenArray)
147 for(var i=0,len=childrenArray.length; i<len; i++)
148 childrenArray[i].selected=e
149 
150 this.getIsCheckAll()
151 },
152 handleCheckedCountryChange(topIndex, sonId, topId, e){//三級(jí)change事件
153 var childrenArray=this.distributorsInfo[topIndex].country
154 var tickCount=0, unTickCount=0, len=childrenArray.length
155 for(var i=0; i < len; i++){
156 if(sonId==childrenArray[i].id) childrenArray[i].selected=e
157 if(childrenArray[i].selected==true) tickCount++
158 if(childrenArray[i].selected==false) unTickCount++
159 }
160 if(tickCount==len) {//三級(jí)級(jí)全勾選
161 this.distributorsInfo[topIndex].selected=true 
162 this.distributorsInfo[topIndex].indeterminate=false
163 } else if(unTickCount==len) {//三級(jí)級(jí)全不勾選
164 this.distributorsInfo[topIndex].selected=false 
165 this.distributorsInfo[topIndex].indeterminate=false
166 } else {
167 this.distributorsInfo[topIndex].selected=false
168 this.distributorsInfo[topIndex].indeterminate=true //添加二級(jí)不確定狀態(tài)
169 }
170 
171 this.getIsCheckAll()
172 },
173 getIsCheckAll(){
174 var tickCount=0, unTickCount=0, ArrLength=this.distributorsInfo.length
175 for(var j=0; j<ArrLength; j++){//全選checkbox狀態(tài)
176 if(this.distributorsInfo[j].selected==true) tickCount++
177 if(this.distributorsInfo[j].selected==false) unTickCount++
178 }
179 if(tickCount==ArrLength) {//二級(jí)全勾選
180 this.ischeckAll=true
181 this.indeterminate=false
182 } else if(unTickCount==ArrLength) {//二級(jí)全不勾選
183 this.ischeckAll=false
184 this.indeterminate=false
185 } else {
186 this.ischeckAll=false
187 this.indeterminate=true //添加一級(jí)不確定狀態(tài)
188 }
189 },
190 
191 showSetDistributorDailog(){
192 this.setDistributorDailog=true
193 },
194 showCancelDistributorDailog(){
195 this.cancelDistributorDailog=true
196 }
197 },
198 created: function() {
199 },
200 mounted: function() {
201 // (async()=> {
202 },
203 watch: {
204 }
205 }
206 </script>
207 <style lang="scss">
208 .deliverySetting{
209 padding: 20px 0;
210 position: relative;
211 .el-table{
212 thead{
213 tr{
214 th{
215 font-size: 14px;
216 }
217 }
218 }
219 tbody{
220 tr{
221 td{
222 vertical-align: baseline;
223 p{
224 line-height: 30px;
225 }
226 .el-checkbox-group{
227 display: flex;
228 flex-direction: column;
229 label{
230 line-height: 30px;
231 margin-left: 0;
232 }
233 }
234 }
235 }
236 }
237 }
238 .deliverySetting-table{
239 font-size: 14px;
240 color: #333;
241 .table-head,
242 .table-body{
243 display: flex;
244 padding: 10px 0;
245 .selection{
246 width: 45px;
247 text-align: center;
248 line-height: 36px;
249 }
250 .width185{
251 width: 185px;
252 }
253 .width265{
254 width: 265px;
255 }
256 }
257 .table-head{
258 height: 36px;
259 align-items: center;
260 background-color: #E7F2FF;
261 }
262 .table-body{
263 border-bottom: 1px solid #e4e4e4;
264 color: #666;
265 &:hover{
266 background-color: #f5f7fa;
267 }
268 .width265{
269 display: flex;
270 flex-direction: column;
271 label{
272 line-height: 30px;
273 margin-left: 0;
274 color: #666;
275 }
276 }
277 p{
278 line-height: 30px;
279 }
280 }
281 }
282 .deliverySetting-btn{
283 /*width: 100%;*/
284 height: 59px;
285 display: flex;
286 justify-content: flex-end;
287 align-items: center;
288 position: absolute;
289 top: -55px;
290 right: -16px;
291 z-index: 100;
292 .tabs-btn {
293 min-width: 90px;
294 height: 34px;
295 line-height: 32px;
296 padding: 0 10px;
297 color: #2387f7;
298 border: solid 1px #4fa2ff;
299 background-color: #e7f2ff;
300 cursor: pointer;
301 &:nth-of-type(2) {
302 margin: 0 15px;
303 }
304 input {
305 border: none;
306 background: transparent;
307 color: inherit;
308 cursor: inherit;
309 outline: none;
310 margin: 0;
311 padding: 0;
312 }
313 &:hover {
314 color: #fff;
315 background-color: #2387f7;
316 }
317 }
318 }
319 .setDistributorDailog{
320 .el-input{
321 width: 270px;
322 }
323 }
324 }
325 </style>
View Code

          好了，以后使用三級(jí)甚至多級(jí)復(fù)選都可以使用此方法添加change代碼即可。
          對(duì)前端的技術(shù)，架構(gòu)技術(shù)感興趣的同學(xué)關(guān)注我的頭條號(hào)，并在后臺(tái)私信發(fā)送關(guān)鍵字：“前端”即可獲取免費(fèi)的架構(gòu)師學(xué)習(xí)資料
          知識(shí)體系已整理好，歡迎免費(fèi)領(lǐng)取。還有面試視頻分享可以免費(fèi)獲取。關(guān)注我，可以獲得沒(méi)有的架構(gòu)經(jīng)驗(yàn)哦！！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲av无码一区二区三区天堂
|
国产福利一区二区三区在线视频|
国产一区二区精品尤物|
国产精品夜色一区二区三区|
亚洲男人的天堂一区二区|
亚洲av乱码一区二区三区按摩|
国产丝袜视频一区二区三区|
日韩一区二区三区精品|
欧美激情国产精品视频一区二区|
老熟妇仑乱视频一区二区|
亚洲成AV人片一区二区密柚|
一区二区三区AV高清免费波多|
日本免费一区二区三区最新|
天堂一区二区三区精品|
精品福利视频一区二区三区|
中文字幕一区二区三区在线观看|
国产精品免费一区二区三区四区|
夜夜添无码一区二区三区|
久久免费视频一区|
在线电影一区二区三区|
国产福利无码一区在线|
亚洲AV无码一区二区一二区|
国产自产V一区二区三区C|
国产亚洲一区二区在线观看|
中文字幕亚洲一区|
国产在线无码视频一区二区三区|
精品免费久久久久国产一区|
精品免费久久久久国产一区
|
人妻久久久一区二区三区|
亚洲一区无码中文字幕|
久久国产一区二区|
中文字幕AV一区中文字幕天堂|
中文字幕AV一区中文字幕天堂|
亚洲国产精品自在线一区二区|
亚洲AV综合色区无码一区|
精品无码人妻一区二区三区|
亚洲国产欧美日韩精品一区二区三区
|
精品乱子伦一区二区三区高清免费播放|
国产精品va一区二区三区|
乱色熟女综合一区二区三区|
亚洲一区二区三区影院|