91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<tree-select
|
|
v-model="treeSelected"
|
|
style="width: 300px;"
|
|
check-strictly
|
|
:expand-all="true"
|
|
:load-data="loadData"
|
|
@on-change="handleTreeSelectChange"
|
|
@on-toggle-expand="handleTreeSelectExpand"
|
|
@on-check-change="handleTreeSelectCheckChange"
|
|
@on-select-change="handleTreeSelectClick"
|
|
:data="treeData"
|
|
></tree-select>
|
|
<Button @click="changeTreeSelectData">更新选中数据</Button>
|
|
<Button @click="changeTreeData">更新树数据</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TreeSelect from '_c/tree-select'
|
|
import { newTreeData } from '@/mock/data/tree-select'
|
|
import { getTreeSelectData } from '@/api/data'
|
|
export default {
|
|
name: 'tree_select_page',
|
|
components: {
|
|
TreeSelect
|
|
},
|
|
data () {
|
|
return {
|
|
treeSelected: [112, 113],
|
|
treeData: []
|
|
}
|
|
},
|
|
mounted () {
|
|
getTreeSelectData().then(res => {
|
|
const { data } = res
|
|
this.treeData = data
|
|
})
|
|
},
|
|
methods: {
|
|
changeTreeSelectData () {
|
|
this.treeSelected = [111, 114]
|
|
},
|
|
changeTreeData () {
|
|
this.treeData = newTreeData
|
|
// this.treeSelected = [];
|
|
},
|
|
handleTreeSelectChange (list) {
|
|
// console.log('=-========', list);
|
|
},
|
|
handleTreeSelectExpand (item) {
|
|
// console.log('toggle expand', item);
|
|
},
|
|
handleTreeSelectCheckChange (selectedArray, item) {
|
|
// console.log(selectedArray, item);
|
|
},
|
|
handleTreeSelectClick (selectArray, item) {
|
|
// console.log(selectArray, item);
|
|
},
|
|
loadData (item, callback) {
|
|
setTimeout(() => {
|
|
let data = [
|
|
{
|
|
id: 111,
|
|
title: '1-1-1'
|
|
},
|
|
{
|
|
id: 112,
|
|
title: '1-1-2'
|
|
},
|
|
{
|
|
id: 113,
|
|
title: '1-1-3'
|
|
},
|
|
{
|
|
id: 114,
|
|
title: '1-1-4'
|
|
}
|
|
]
|
|
callback(data)
|
|
}, 1000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|