解决el-checked-group中v-medel绑定的是一个数组对象方法(不用修改源码)

2023-05-08,,

思路:弃用el-checked-group使用el-checked模拟

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
</head> <body>
<div id="app">
<div style="margin: 15px 0;"></div>
<div v-for="city in cities">
<el-checkbox :label="city" :key="city.id" :checked=indexOf(city,checkedCities) @change=change(city,indexOf(city,checkedCities)) >{{city.name}}</el-checkbox>
</div>
{{ result }}
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
checkAll: false,
result:[],
checkedCities: [{
name: "上海",
id: 1
}],
cities: [{
name: "上海",
id: 1
},
{
name: "北京",
id: 2
}
],
isIndeterminate: true
}
},
created(){
this.$nextTick(() => {
this.result = this.checkedCities
})
},
methods: {
indexOf(item, items) {
console.log(items.indexOf(item))
items = JSON.stringify(items)
item = JSON.stringify(item)
if(items.indexOf(item) > -1 ){
return true
}else{
return false
}
},
change(e,c){
if(c){
this.result.forEach((value, index, array) => {
if (e.id == value.id) {
this.result.splice(index, 1)
}
})
}else{
this.result.push(e)
}
}
}
})
</script> </html>

解决el-checked-group中v-medel绑定的是一个数组对象方法(不用修改源码)的相关教程结束。

《解决el-checked-group中v-medel绑定的是一个数组对象方法(不用修改源码).doc》

下载本文的Word格式文档,以方便收藏与打印。