iview/examples/routers/tree.vue

62 lines
2 KiB
Vue
Raw Normal View History

<template>
2017-10-23 11:55:35 +08:00
<div>
2017-10-24 15:47:07 +08:00
<Tree :data="baseData" show-checkbox multiple></Tree>
2017-10-23 11:55:35 +08:00
<Button @click="handleAdd">add</Button>
<Button @click="handleUpdate">update</Button>
</div>
</template>
<script>
export default {
2017-03-03 10:35:38 +08:00
data () {
2017-02-07 11:34:00 +08:00
return {
2017-10-23 11:55:35 +08:00
baseData: [
2017-03-24 20:50:13 +08:00
{
2017-10-23 11:55:35 +08:00
expand: true,
title: 'parent 1',
2017-10-24 15:47:07 +08:00
checked: true,
2017-04-27 13:56:58 +08:00
children: [
{
2017-10-23 11:55:35 +08:00
title: 'parent 1-0',
expand: true,
disabled: true,
2017-04-27 13:56:58 +08:00
children: [
{
2017-10-23 11:55:35 +08:00
title: 'leaf',
disableCheckbox: true
2017-04-27 13:56:58 +08:00
},
{
2017-10-23 11:55:35 +08:00
title: 'leaf',
2017-04-27 13:56:58 +08:00
}
]
},
{
2017-10-23 11:55:35 +08:00
title: 'parent 1-1',
2017-10-24 15:47:07 +08:00
expand: false,
2017-10-23 11:55:35 +08:00
checked: true,
children: [
{
title: '<span style="color: red">leaf</span>',
}
]
2017-04-27 13:56:58 +08:00
}
]
2017-03-27 14:28:42 +08:00
}
2017-03-24 20:50:13 +08:00
]
2017-02-07 11:34:00 +08:00
}
},
methods: {
2017-10-23 11:55:35 +08:00
handleAdd () {
this.baseData.push(
{
title: 'test name',
checked: true
}
)
},
handleUpdate () {
this.$set(this.baseData[0].children[0], 'disabled', false);
}
2017-02-07 11:34:00 +08:00
}
}
</script>