最近由於專案需求，寫了乙個單選全選的邏輯，直接拿到vue專案裡即可執行
思路：新建乙個陣列儲存所選擇的值，當不選擇時找出那個不選的刪除，最後可以通過監聽這個陣列，改變一些顯示狀態，包括計算合計，已選擇的數量等等，單選和全選只負責他們該有的邏輯
='flex'
>
="item"
:class
='item.ischeck ? "redcolor" : ""' v-
for=
'(item,index) in list'
:key=
'index' @click=
'gouxuan(item)'
>
}<
/div>
"checkbox" v-model=
"checkall"
/>
}<
/div>
'cancel'
>取消<
/div>
class
='hasdown ? "bgred" : "bggrey"'
/div>
<
/div>
<
/template>
export
default,,
,,,]
, selectarr:
, allnum:0,
selectalltext:
"全選"
, checkall:
false
, hasdown:
false};
},watch:);
}else
if(selectlen >
0&& selectlen < listlen)
else
if(selectlen == listlen));
}},// 全選
checkall:
function
(newval)
}this
.selectarr =
json
.parse
(json
.stringify
(this
.list));
}else}}
},methods:
else},
// 取消
cancel()
);}}
};<
/script>
'scss'
>
.flex
.redcolor
.black
.bgred
.bggrey
}<
/style>
vue element 動態單選多選全選
實現效果如圖 資料格式如下 pps 核心 如下 資料請求並初始化 api.property.listbyusage this.usage then res this.pps pps console.log pps json.stringify this pps 資料加工方法如下 cheaklengt...
layui核取方塊全選,單選取消全選
在layui框架的基礎上，某個地方需要全選或者取消全選這樣的乙個需求。html 區 div class layui form item label class layui form label 可見班級 label div class layui input block input type che...
使用vue製作全選和不全選
這裡主要介紹的是使用vue雙向資料的乙個指令v module type checkbox v model all 全選 type checkbox value html v model msg html type checkbox value css v model msg css type che...