vue element 動態單選多選全選

2021-09-24 10:40:10 字數 1534 閱讀 2766

實現效果如圖

資料格式如下:

pps: [,]},,]}]
核心**如下:

資料請求並初始化

api.property.listbyusage(this.usage).then(res =>}}

this.pps =pps

console.log('pps:', json.stringify(this

.pps))

})

資料加工方法如下:

cheaklength(code)  

else}}

},handlecheckallchangeprops(code)

this.result[code] = this.checkall[code] ?ppsvalues : }}

},handlecheckallchange(val)

this.streets = val ?streetvalue :

this.streetisindeterminate = false

},

.col-12.py-2.df-row-as-jsta

.d-inline-block.label.mr-3.text-right 所屬街道:

el-checkbox(:indeterminate="streetisindeterminate", v-model="streetcheckall", @change="handlecheckallchange") 全選

el-checkbox-group.ml-4(v-model="streets")

el-checkbox(v-for="item in streetslist", :key="item.value", :label="item.value", :value="item.value") }

.col-12.py-2.df-row-as-jsta(v-for='prop in pps' :key="prop.code")

.d-inline-block.label.mr-3.text-right }:

el-checkbox.mr-3(v-model="checkall[prop.code]" @change="handlecheckallchangeprops(prop.code)") 全部

el-checkbox-group.d-inline-block.d-flex.flex-row.flex-wrap(v-model="result[prop.code]", @change="cheaklength(prop.code)")

el-checkbox(v-for="item in prop.values" :key="item.code" :label="item.code") }

粗體為核心**

posted @

2018-10-30 23:15

菜鳥的進擊 閱讀(

...)

編輯收藏

vue element 動態表單驗證

公司最近的專案有個新增動態表單的需求,總結一下我在表單驗證上遇到的一些坑。如圖是功能的需求,這個功能挺好實現的,但是表單驗證真是耗費了我一些功夫。vue element在表單驗證上有一些限制,必須依照element示例的格式才能驗證通過。附上 1 el form model dynamicvalid...

Vue Element專案實戰系列 動態麵包屑

麵包屑應該是我們在專案中經常使用的乙個功能,一般情況下它用來表示我們當前所處的站點位置,也可以幫助我們能夠更快的回到上個層級。今天我們就來聊聊如何在 vue 的專案中實現麵包屑功能。以下案例都是使用 element ui 進行實現。首先我們想到的最笨的方法就是在每個需要麵包屑的頁面中固定寫好。如果按...

vue element 動態增加表單並進行表單驗證

表單驗證 需要注意的一點是 普通表單驗證單項依靠的是prop 而動態生成的表單要用 prop 書寫的語法是 prop morenotifyobject.index notifyobject morenotifyobject是v for繫結的陣列,index是索引,notifyobject是表單繫結的...