mirror of https://github.com/ElemeFE/element
Update doc for Tree and DatePicker (#6113)
* Update DateTimePicker doc * Update Tree doc * Update DateTimePicker doc * Update Tree doc * update doc * Update datetime-picker.mdpull/6325/head
Dreamacro
杨奕
parent
78e947bcac
commit
4348420277
|
|
@ -100,6 +100,10 @@
|
|||
|
||||
Select date and time in one picker.
|
||||
|
||||
:::tip
|
||||
DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on `pickerOptions` and other attributes, you can refer to DatePicker and TimePicker.
|
||||
:::
|
||||
|
||||
### Date and time
|
||||
|
||||
:::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
|
||||
|
|
@ -248,6 +252,7 @@ Select date and time in one picker.
|
|||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
|
||||
|
||||
### shortcuts
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -137,6 +137,12 @@
|
|||
children: 'zones'
|
||||
};
|
||||
|
||||
const props1 = {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
|
|
@ -185,6 +191,23 @@
|
|||
resolve(data);
|
||||
}, 500);
|
||||
},
|
||||
loadNode1(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
if (node.level > 1) return resolve([]);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = [{
|
||||
name: 'leaf',
|
||||
leaf: true
|
||||
}, {
|
||||
name: 'zone'
|
||||
}];
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
},
|
||||
getCheckedNodes() {
|
||||
console.log(this.$refs.tree.getCheckedNodes());
|
||||
},
|
||||
|
|
@ -210,10 +233,16 @@
|
|||
this.$refs.tree.setCheckedKeys([]);
|
||||
},
|
||||
append(store, data) {
|
||||
store.append({ id: id++, label: 'testtest', children: [] }, data);
|
||||
const newChild = { id: id++, label: 'testtest', children: [] };
|
||||
store.append(newChild, data);
|
||||
data.children = data.children || [];
|
||||
data.children.push(newChild);
|
||||
},
|
||||
|
||||
remove(store, data) {
|
||||
remove(store, node, data) {
|
||||
const parent = node.parent;
|
||||
const index = parent.data.children.findIndex(d => d.id === data.id);
|
||||
parent.data.children.splice(index, 1);
|
||||
store.remove(data);
|
||||
},
|
||||
|
||||
|
|
@ -225,7 +254,7 @@
|
|||
</span>
|
||||
<span style="float: right; margin-right: 20px">
|
||||
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
|
||||
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
|
||||
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
},
|
||||
|
|
@ -244,6 +273,7 @@
|
|||
regions,
|
||||
defaultProps,
|
||||
props,
|
||||
props1,
|
||||
defaultCheckedKeys: [5],
|
||||
defaultExpandedKeys: [2, 3],
|
||||
filterText: ''
|
||||
|
|
@ -326,7 +356,6 @@ Used for node selection. In the following example, data for each layer is acquir
|
|||
::: demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="regions"
|
||||
:props="props"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
|
|
@ -338,11 +367,6 @@ Used for node selection. In the following example, data for each layer is acquir
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
regions: [{
|
||||
'name': 'region1'
|
||||
}, {
|
||||
'name': 'region2'
|
||||
}],
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones'
|
||||
|
|
@ -393,6 +417,52 @@ Used for node selection. In the following example, data for each layer is acquir
|
|||
```
|
||||
:::
|
||||
|
||||
### Custom leaf node in lazy mode
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-tree
|
||||
:props="props1"
|
||||
:load="loadNode1"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
props1: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadNode1(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
if (node.level > 1) return resolve([]);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = [{
|
||||
name: 'leaf',
|
||||
leaf: true
|
||||
}, {
|
||||
name: 'zone'
|
||||
}];
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled checkbox
|
||||
|
||||
The checkbox of a node can be set as disabled.
|
||||
|
|
@ -613,6 +683,10 @@ Tree nodes can be initially expanded or checked
|
|||
### Custom node content
|
||||
The content of tree nodes can be customized, so you can add icons or buttons as you will
|
||||
|
||||
:::warning
|
||||
`Append` and `remove` do not change `data`
|
||||
:::
|
||||
|
||||
::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
|
||||
```html
|
||||
<el-tree
|
||||
|
|
@ -675,22 +749,28 @@ The content of tree nodes can be customized, so you can add icons or buttons as
|
|||
|
||||
methods: {
|
||||
append(store, data) {
|
||||
store.append({ id: id++, label: 'testtest', children: [] }, data);
|
||||
const newChild = { id: id++, label: 'testtest', children: [] };
|
||||
store.append(newChild, data); // need change data by yourself
|
||||
data.children = data.children || [];
|
||||
data.children.push(newChild);
|
||||
},
|
||||
|
||||
remove(store, data) {
|
||||
store.remove(data);
|
||||
remove(store, node, data) {
|
||||
const parent = node.parent;
|
||||
const index = parent.data.children.findIndex(d => d.id === data.id);
|
||||
parent.data.children.splice(index, 1);
|
||||
store.remove(data); // need change data by yourself
|
||||
},
|
||||
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span>
|
||||
<span style="white-space: normal">
|
||||
<span>
|
||||
<span>{node.label}</span>
|
||||
</span>
|
||||
<span style="float: right; margin-right: 20px">
|
||||
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
|
||||
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
|
||||
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
}
|
||||
|
|
@ -877,7 +957,8 @@ Only one node among the same level can be expanded at one time.
|
|||
| --------- | ---------------------------------------- | ------ | --------------- | ------- |
|
||||
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — |
|
||||
| children | specify which node object is used as the node's subtree | string, function(data, node) | — | — |
|
||||
| disabled | specify which node's checkbox disabled | boolean, function(data, node) | — | — |
|
||||
| disabled | specify which node's checkbox disabled | boolean, function(data, node) | — | — |
|
||||
| isLeaf | specify whether the node is a leaf node | boolean, function(data, node) | — | — |
|
||||
|
||||
### Method
|
||||
`Tree` has the following method, which returns the currently selected array of nodes.
|
||||
|
|
|
|||
|
|
@ -100,6 +100,10 @@
|
|||
|
||||
在同一个选择器里选择日期和时间
|
||||
|
||||
:::tip
|
||||
DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其他选项可以参照 DatePicker 和 TimePicker。
|
||||
:::
|
||||
|
||||
### 日期和时间点
|
||||
|
||||
:::demo 通过设置`type`属性为`datetime`，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
|
||||
|
|
@ -247,6 +251,7 @@
|
|||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
|
||||
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
|
||||
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
|
||||
|
||||
### Shortcuts
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -137,6 +137,12 @@
|
|||
children: 'zones'
|
||||
};
|
||||
|
||||
const props1 = {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
|
|
@ -185,6 +191,23 @@
|
|||
resolve(data);
|
||||
}, 500);
|
||||
},
|
||||
loadNode1(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
if (node.level > 1) return resolve([]);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = [{
|
||||
name: 'leaf',
|
||||
leaf: true
|
||||
}, {
|
||||
name: 'zone'
|
||||
}];
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
},
|
||||
getCheckedNodes() {
|
||||
console.log(this.$refs.tree.getCheckedNodes());
|
||||
},
|
||||
|
|
@ -210,10 +233,16 @@
|
|||
this.$refs.tree.setCheckedKeys([]);
|
||||
},
|
||||
append(store, data) {
|
||||
store.append({ id: id++, label: 'testtest', children: [] }, data);
|
||||
const newChild = { id: id++, label: 'testtest', children: [] };
|
||||
store.append(newChild, data);
|
||||
data.children = data.children || [];
|
||||
data.children.push(newChild);
|
||||
},
|
||||
|
||||
remove(store, data) {
|
||||
remove(store, node, data) {
|
||||
const parent = node.parent;
|
||||
const index = parent.data.children.findIndex(d => d.id === data.id);
|
||||
parent.data.children.splice(index, 1);
|
||||
store.remove(data);
|
||||
},
|
||||
|
||||
|
|
@ -225,7 +254,7 @@
|
|||
</span>
|
||||
<span style="float: right; margin-right: 20px">
|
||||
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
|
||||
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
|
||||
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
},
|
||||
|
|
@ -244,6 +273,7 @@
|
|||
regions,
|
||||
defaultProps,
|
||||
props,
|
||||
props1,
|
||||
defaultCheckedKeys: [5],
|
||||
defaultExpandedKeys: [2, 3],
|
||||
filterText: ''
|
||||
|
|
@ -326,7 +356,6 @@
|
|||
::: demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="regions"
|
||||
:props="props"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
|
|
@ -338,11 +367,6 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
regions: [{
|
||||
'name': 'region1'
|
||||
}, {
|
||||
'name': 'region2'
|
||||
}],
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones'
|
||||
|
|
@ -393,6 +417,52 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 懒加载自定义叶子节点
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-tree
|
||||
:props="props1"
|
||||
:load="loadNode1"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
props1: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadNode1(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
if (node.level > 1) return resolve([]);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = [{
|
||||
name: 'leaf',
|
||||
leaf: true
|
||||
}, {
|
||||
name: 'zone'
|
||||
}];
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 默认展开和默认选中
|
||||
可将 Tree 的某些节点设置为默认展开或默认选中
|
||||
|
||||
|
|
@ -612,6 +682,10 @@
|
|||
### 自定义节点内容
|
||||
节点的内容支持自定义，可以在节点区添加按钮或图标等内容
|
||||
|
||||
:::warning
|
||||
`append` 和 `remove` 方法不会改变 `data` 上的数据
|
||||
:::
|
||||
|
||||
::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
|
||||
```html
|
||||
<el-tree
|
||||
|
|
@ -674,22 +748,28 @@
|
|||
|
||||
methods: {
|
||||
append(store, data) {
|
||||
store.append({ id: id++, label: 'testtest', children: [] }, data);
|
||||
const newChild = { id: id++, label: 'testtest', children: [] };
|
||||
store.append(newChild, data); // append 不会改变 data
|
||||
data.children = data.children || [];
|
||||
data.children.push(newChild);
|
||||
},
|
||||
|
||||
remove(store, data) {
|
||||
store.remove(data);
|
||||
remove(store, node, data) {
|
||||
const parent = node.parent;
|
||||
const index = parent.data.children.findIndex(d => d.id === data.id);
|
||||
parent.data.children.splice(index, 1);
|
||||
store.remove(data); // remove 不会改变 data
|
||||
},
|
||||
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span>
|
||||
<span style="white-space: normal">
|
||||
<span>
|
||||
<span>{node.label}</span>
|
||||
</span>
|
||||
<span style="float: right; margin-right: 20px">
|
||||
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
|
||||
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
|
||||
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
}
|
||||
|
|
@ -876,7 +956,8 @@
|
|||
| -------- | ----------------- | ------ | ---- | ---- |
|
||||
| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | — |
|
||||
| children | 指定子树为节点对象的某个属性值 | string, function(data, node) | — | — |
|
||||
| disabled | 指定节点选择框是否禁用 | boolean, function(data, node) | — | — |
|
||||
| disabled | 指定节点选择框是否禁用 | boolean, function(data, node) | — | — |
|
||||
| isLeaf | 指定节点是否为叶子节点 | boolean, function(data, node) | — | — |
|
||||
|
||||
### 方法
|
||||
`Tree` 拥有如下方法，返回目前被选中的节点数组：
|
||||
|
|
|
|||
Loading…
Reference in New Issue