Skip to content

Commit

Permalink
fix(TreePicker): add refresh method
Browse files Browse the repository at this point in the history
  • Loading branch information
@vvpvvp
vvpvvp committed Dec 5, 2018
1 parent e62f0aa commit d2cff1d
Show file tree
Hide file tree
Showing 11 changed files with 333 additions and 99 deletions.
19 changes: 0 additions & 19 deletions doc/components/component/data/plugin/tree.vue
View file

This file was deleted.

5 changes: 5 additions & 0 deletions doc/components/component/plugin/tree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,11 @@
<td>收起所有的折叠</td>
<td></td>
</tr>
<tr>
<td>refresh</td>
<td>刷新数据</td>
<td></td>
</tr>
</table>

<h3>Tree 事件</h3>
Expand Down
84 changes: 82 additions & 2 deletions doc/components/component/plugin/treepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@

<h3>多选</h3>
<example demo="plugins/treepicker2"></example>

<h3>自定义样式</h3>
<example demo="plugins/treepicker4"></example>

<h3>全局</h3>
<blockquote>使用的是treeconfig中的配置项</blockquote>
Expand Down Expand Up @@ -96,6 +99,11 @@
<td>选中所有值(多选)</td>
<td></td>
</tr>
<tr>
<td>refresh</td>
<td>刷新数据</td>
<td></td>
</tr>
</table>


Expand All @@ -106,8 +114,8 @@
<th>说明</th>
</tr>
<tr>
<td>loadDataSuccess</td>
<td>当异步数据请求加载成功的时候</td>
<td>input</td>
<td>当v-model数据产生变化的时候</td>
</tr>
<tr>
<td>select</td>
Expand All @@ -117,6 +125,78 @@
<td>choose</td>
<td>当多选的时候</td>
</tr>
<tr>
<td>loadDataSuccess</td>
<td>当异步数据请求加载成功的时候</td>
</tr>
</table>


<h3>option 配置</h3>
<table class="table">
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
<tr>
<td>keyName</td>
<td>数据的key对应字段</td>
<td>String</td>
<td>-</td>
<td>全局配置<code>tree.default.keyName</code></td>
</tr>
<tr>
<td>titleName</td>
<td>数据的title对应字段</td>
<td>String</td>
<td>-</td>
<td>全局配置<code>tree.default.titleName</code></td>
</tr>
<tr>
<td>parentName</td>
<td>数据的parent对应字段，配合数据类型为list的数据</td>
<td>String</td>
<td>-</td>
<td>全局配置<code>tree.default.parentName</code></td>
</tr>
<tr>
<td>childrenName</td>
<td>数据的children对应字段，配合数据类型为tree的数据</td>
<td>String</td>
<td>-</td>
<td>全局配置<code>tree.default.childrenName</code></td>
</tr>
<tr>
<td>dataMode</td>
<td>提供的数据类型，是平铺需要解析的列表，还是已经生成好的tree数据</td>
<td>String</td>
<td>list, tree</td>
<td>list</td>
</tr>
<tr>
<td>datas</td>
<td>用于tree展示的数据</td>
<td>Array, Function</td>
<td>-</td>
<td>[]</td>
</tr>
<tr>
<td>getTotalDatas</td>
<td>异步获取用于tree展示的数据，一次性全部加载</td>
<td>Function</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>getDatas</td>
<td>异步获取用于tree展示的数据，每一次单击获取子集</td>
<td>Function</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</div>
</template>
1 change: 1 addition & 0 deletions doc/components/demos/demos.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ export default {
'pluginsTreepicker1': resolve => require.ensure([], require => require('./plugins/treepicker1'), 'plugins'),
'pluginsTreepicker2': resolve => require.ensure([], require => require('./plugins/treepicker2'), 'plugins'),
'pluginsTreepicker3': resolve => require.ensure([], require => require('./plugins/treepicker3'), 'plugins'),
'pluginsTreepicker4': resolve => require.ensure([], require => require('./plugins/treepicker4'), 'plugins'),
'pluginsTree1': resolve => require.ensure([], require => require('./plugins/tree1'), 'plugins'),
'pluginsTree2': resolve => require.ensure([], require => require('./plugins/tree2'), 'plugins'),
'pluginsTree3': resolve => require.ensure([], require => require('./plugins/tree3'), 'plugins'),
Expand Down
18 changes: 1 addition & 17 deletions doc/components/demos/plugins/treepicker1.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,9 @@
<style lang="less">
// 将placeholder文字变成红色
.tree-picker-demo-show{
.h-treepicker-placeholder{
color: @red-color;
}
}
// 将tree选中的背景色变成红色
.tree-picker-demo-dropdown{
.h-tree-show-desc.selected {
background-color: @red-color;
}
}
</style>

<template>
<div>
<p>value: {{value}}</p>
<p>自定义<code>className</code>参数可以自定义特殊的样式</p>
<p>修改展示：<Button @click="update">更新值</Button></p>
<p v-width="300">
<TreePicker className="tree-picker-demo" :option="param" ref="treepicker" v-model="value" @change="change" @choose="choose" @select="select"></TreePicker>
<TreePicker :option="param" ref="treepicker" v-model="value" @change="change" @choose="choose" @select="select"></TreePicker>
</p>
</div>
</template>
Expand Down
70 changes: 70 additions & 0 deletions doc/components/demos/plugins/treepicker4.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<style lang="less">
// 将placeholder文字变成红色
.tree-picker-demo-show{
.h-treepicker-placeholder{
color: @red-color;
}
}
// 将tree选中的背景色变成红色
.tree-picker-demo-dropdown{
.h-tree-show-desc.selected {
background-color: @red-color;
}
}
</style>

<template>
<div>
<p>自定义<code>className</code>参数可以自定义特殊的样式</p>
<p v-width="300">
<TreePicker className="tree-picker-demo" :option="param" ref="treepicker" v-model="value" @change="change" @choose="choose" @select="select"></TreePicker>
</p>
</div>
</template>
<script>
export default {
data() {
let list = [
{ id: 1, title: "一级" },
{ id: 2, title: "二级" },
{ id: 3, title: "三级", disabled: true },
{ id: 10, title: "一级-0", parent: 1 },
{ id: 11, title: "一级-1", parent: 1 },
{ id: 12, title: "一级-2", parent: 1 },
{ id: 13, title: "一级-3", parent: 1 },
{ id: 14, title: "一级-4", parent: 1 },
{ id: 20, title: "二级-0", parent: 2 },
{ id: 21, title: "二级-1", parent: 2 },
{ id: 22, title: "二级-2", parent: 2 },
{ id: 23, title: "二级-3", parent: 2 },
{ id: 24, title: "二级-4", parent: 2 },
{ id: 30, title: "三级-0", parent: 3 },
{ id: 31, title: "三级-1", parent: 3 },
{ id: 32, title: "三级-2", parent: 3 },
{ id: 33, title: "三级-3", parent: 3 },
{ id: 34, title: "三级-4", parent: 3 }
];
return {
value: null,
param: {
keyName: 'id',
parentName: 'parent',
titleName: 'title',
dataMode: 'list',
datas: list
}
}
},
methods: {
change() {
//选择器关闭的时候触发
},
choose(data) {
log(data);
},
select(data) {
log(data);
}
}
};
</script>
5 changes: 5 additions & 0 deletions doc/components_en/component/plugin/tree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,11 @@
<td>Collapse all folds</td>
<td></td>
</tr>
<tr>
<td>refresh</td>
<td>refresh view</td>
<td></td>
</tr>
</table>

<h3>Tree Event</h3>
Expand Down
75 changes: 75 additions & 0 deletions doc/components_en/component/plugin/treepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
<h3>Multiple</h3>
<example demo="plugins/treepicker2"></example>

<h3>Custom theme</h3>
<example demo="plugins/treepicker4"></example>

<h3>Global configuration</h3>
<blockquote>Using the configuration items in treeconfig</blockquote>
<example demo="plugins/treepicker3"></example>
Expand Down Expand Up @@ -96,6 +99,78 @@
<td>Select all values ​​(multiple choices)</td>
<td></td>
</tr>
<tr>
<td>refresh</td>
<td>refresh view</td>
<td></td>
</tr>
</table>

<h3>option Property</h3>
<table class="table">
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Optional</th>
<th>Default</th>
</tr>
<tr>
<td>keyName</td>
<td>The key field name</td>
<td>String</td>
<td>-</td>
<td>Global configuration <code>tree.default.keyName</code></td>
</tr>
<tr>
<td>titleName</td>
<td>The title field name</td>
<td>String</td>
<td>-</td>
<td>Global configuration <code>tree.default.titleName</code></td>
</tr>
<tr>
<td>parentName</td>
<td>The parent field name</td>
<td>String</td>
<td>-</td>
<td>Global configuration <code>tree.default.parentName</code></td>
</tr>
<tr>
<td>childrenName</td>
<td>The children field name</td>
<td>String</td>
<td>-</td>
<td>Global configuration <code>tree.default.childrenName</code></td>
</tr>
<tr>
<td>dataMode</td>
<td>The type of data provided is whether the tile needs to be parsed or whether tree data has already been generated.</td>
<td>String</td>
<td>list, tree</td>
<td>list</td>
</tr>
<tr>
<td>datas</td>
<td>Data for tree display</td>
<td>Array, Function</td>
<td>-</td>
<td>[]</td>
</tr>
<tr>
<td>getTotalDatas</td>
<td>Acquiring data for tree display asynchronously, loading all at once</td>
<td>Function</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>getDatas</td>
<td>Asynchronously fetches the data for the tree display, each click to get a subset</td>
<td>Function</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</div>
</template>
8 changes: 0 additions & 8 deletions doc/js/config/router-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,14 +194,6 @@ const router = {
name: 'pluginCity',
component: () =>
import ('components/component/data/plugin/city')
}, {
path: 'data/plugin/tree',
name: 'dataPluginTree',
meta: {
title: 'Tree',
},
component: () =>
import ('components/component/data/plugin/tree')
}, {
path: 'data/plugin/taginput',
name: 'pluginTaginput',
Expand Down
2 changes: 1 addition & 1 deletion src/components/tree/tree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ export default {
}
},
chooseAll() {
for(let key in this.treeObj) {
for (let key in this.treeObj) {
this.treeObj[key].status.choose = true;
}
this.setvalue();
Expand Down

0 comments on commit d2cff1d

Please sign in to comment.