十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
小編給大家分享一下vue如何實(shí)現(xiàn)基于element-ui的三級(jí)CheckBox復(fù)選框,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比延津網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式延津網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋延津地區(qū)。費(fèi)用合理售后完善,十多年實(shí)體公司更值得信賴。
效果圖預(yù)覽:
首先是頁面布局,當(dāng)然也可已使用table,但是自己用flex布局后面更容易增刪改查其他功能
分區(qū)名稱國(guó)家派送商
{{ partition.partitionName }}
{{country.fieldName}} {{ item.distributors }}
接下來是數(shù)據(jù)結(jié)構(gòu),自定義的,可以更后臺(tái)商議,但是字段indeterminate(顯示不確定狀態(tài)~符號(hào)),selected(CheckBox選中狀態(tài))一定要讓后臺(tái)加入到data中,其他可以按照后臺(tái)數(shù)據(jù)來。
distributorsInfo:[ { partitionName:'1區(qū)',selected:false,partitionId:1,isIndeterminate:false, country:[ { id: "1",fieldName: "奧地利",fieldTableName: "奧地利",distributors:'UPS',selected: false}, { id: "2",fieldName: "芬蘭",fieldTableName: "芬蘭",distributors:'UPS',selected: false}, { id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false}, { id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false}, { id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false}, { id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},] }, { partitionName:'2區(qū)',selected:false,partitionId:2,isIndeterminate:false, country:[ { id: "5",fieldName: "丹麥",fieldTableName: "單買",distributors:'',selected: false}, { id: "6",fieldName: "法國(guó)",fieldTableName: "法國(guó)",distributors:'',selected: false},] }, { partitionName:'3區(qū)',selected:false,partitionId:3,isIndeterminate:false, country:[ { id: "7",fieldName: "德國(guó)",fieldTableName: "德國(guó)",distributors:'YODEL',selected: false}, { id: "8",fieldName: "瑞士",fieldTableName: "瑞士",distributors:'DPD',selected: false}] } ], ischeckAll:false,//一級(jí)全選狀態(tài)
因?yàn)榇颂幨侨?jí)復(fù)選,所以函數(shù)為三個(gè)change,具體有詳細(xì)注釋可以查看
handleCheckAllChange(e){//一級(jí)change事件 this.ischeckAll = e if(e == true){ this.indeterminate = false for(var i=0,len=this.distributorsInfo.length; i以下是頁面完整組件代碼可以使用預(yù)覽
分區(qū)名稱國(guó)家派送商
{{ partition.partitionName }}
{{country.fieldName}} {{ item.distributors }}
取 消 確 定
您確定要取消對(duì)的派送分配嗎?
取 消 確 定 好了,以后使用三級(jí)甚至多級(jí)復(fù)選都可以使用此方法添加change代碼即可。
以上是“vue如何實(shí)現(xiàn)基于element-ui的三級(jí)CheckBox復(fù)選框”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站欄目:vue如何實(shí)現(xiàn)基于element-ui的三級(jí)CheckBox復(fù)選框
網(wǎng)頁鏈接:http://m.jiaotiyi.com/article/jhgooj.html