console
var data = {
select: [],
list: [{
name: '1',
children: [{
name: '1-1',
children: [{
name: '1-1-1',
}]
}]
}, {
name: '2',
children: [{
name: '2-1'
}, {
name: '2-2'
}]
}]
};
Vue.component('bbb', {
props: ['data'],
template: `
<div style="margin-left: 30px">
<aaa :data="data"></aaa>
</div>
`
})
function calccc(list, value){
list.forEach(data=>{
if (data.check) value.push(data.name)
if (data.children && data.children.length) calccc(data.children, value);
})
}
Vue.component('ccc', {
props: ['value', 'data'],
watch: {
data: {deep: true,handler:function (data){
let value = [];
this.calc(data, value);
this.$emit('input', value);
}}
},
methods: {
calc: function(list, value){
list.forEach(data=>{
if (data.check) value.push(data.name)
if (data.children && data.children.length) this.calc(data.children, value);
})
}
},
template: `
<div>
<aaa :data="data"></aaa>
</div>
`
})
Vue.component('aaa', {
props: ['data'],
template: `<div >
<div v-for="item in data">
<input type="checkbox" v-model="item.check">{{item.name}}
<hr>
<bbb v-if="item.children && item.children.length" :data="item.children"></bbb>
</div>
</div>`
})
var vm = new Vue({
el: '#app',
data: data,
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
<ccc :data="list" v-model="select"></ccc>
你选择的:
<div v-html="select"></div>
</div>