取消选中所有的树视图复选框

Question

我有一个v-treeview组件(Vuetify 2.6.7)

<v-treeview
class="location-tree"
v-model="location_tree"
ref="location_tree"
:search="location_search"
selectable
dense=true
open-on-click=true
expand-icon="$plus"
selected-color="success"
:items="locations"
selection-type="all"
transition=true
@input="location_tree_update"
></v-treeview>

如何取消所有复选框只需点击一下按钮?

Answer 1

你只需要清空你传递给location_tree.splice(0)或location_tree = []按钮点击v-model的数组。

检查下面的例子:

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selection: [],
items: [{
id: 1,
name: 'Applications :',
children: [{
id: 2,
name: 'Calendar : app'
},
{
id: 3,
name: 'Chrome : app'
},
{
id: 4,
name: 'Webstorm : app'
},
],
},
{
id: 5,
name: 'Documents :',
children: [{
id: 6,
name: 'vuetify :',
children: [{
id: 7,
name: 'src :',
children: [{
id: 8,
name: 'index : ts'
},
{
id: 9,
name: 'bootstrap : ts'
},
],
}, ],
},
{
id: 10,
name: 'material2 :',
children: [{
id: 11,
name: 'src :',
children: [{
id: 12,
name: 'v-btn : ts'
},
{
id: 13,
name: 'v-card : ts'
},
{
id: 14,
name: 'v-window : ts'
},
],
}, ],
},
],
},
{
id: 15,
name: 'Downloads :',
children: [{
id: 16,
name: 'October : pdf'
},
{
id: 17,
name: 'November : pdf'
},
{
id: 18,
name: 'Tutorial : html'
},
],
},
{
id: 19,
name: 'Videos :',
children: [{
id: 20,
name: 'Tutorials :',
children: [{
id: 21,
name: 'Basic layouts : mp4'
},
{
id: 22,
name: 'Advanced techniques : mp4'
},
{
id: 23,
name: 'All about app : dir'
},
],
},
{
id: 24,
name: 'Intro : mov'
},
{
id: 25,
name: 'Conference introduction : avi'
},
],
},
],
}),
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-btn color="primary" @click="selection.splice(0)">clear selection</v-btn>
<v-treeview v-model="selection" selectable :items="items"></v-treeview>
</v-container>
</v-app>
</div>