Skip to content

E
Element
Commit 4517e3d9 authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

Autocomplete: add value-key (#7671) 

* Autocomplete: add value-key

* fix autocomplete test
parent 14ecf86c
Show whitespace changes
Inline Side-by-side
Showing with 86 additions and 86 deletions
build/deploy-faas.sh 0 → 100644
View file @ 4517e3d9
#! /bin/sh
mkdir temp_web
npm run deploy:build
cd temp_web
git clone -b gh-pages https://github.com/ElemeFE/element.git && cd element
# build sub folder
SUB_FOLDER='2.0'
mkdir $SUB_FOLDER
# rm -rf *.js *.css *.map static
rm -rf $SUB_FOLDER/**
# cp -rf ../../examples/element-ui/** .
cp -rf ../../examples/element-ui/** $SUB_FOLDER/
cp -rf ../../examples/element-ui/versions.json .
cd ../..
# deploy domestic site
faas deploy alpha
\ No newline at end of file
build/release.sh
View file @ 4517e3d9
......@@ -16,7 +16,7 @@ then
echo "Releasing theme-chalk $VERSION ..."
cd packages/theme-chalk
npm version $VERSION --message "[release] $VERSION"
npm publish --tag next
npm publish
cd ../..
# commit
......
examples/components/footer.vue
View file @ 4517e3d9
......@@ -50,6 +50,7 @@
.container {
box-sizing: border-box;
width: auto;
}
.footer-main {
......
examples/docs/en-US/input.md
View file @ 4517e3d9
......@@ -657,7 +657,7 @@ Attribute | Description | Type | Options | Default
|----| ----| ----| ---- | -----|
|placeholder| the placeholder of Autocomplete| string | — | — |
|disabled | whether Autocomplete is disabled | boolean | — | false|
| props | configuration options, see the following table | object | — | — |
| valueKey | key name of the input suggestion object for display | string | — | value |
|icon | icon name | string | — | — |
|value | binding value | string | — | — |
| debounce | debounce delay when typing, in milliseconds | number | — | 300 |
......@@ -669,12 +669,6 @@ Attribute | Description | Type | Options | Default
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false |
| label | label text | string | — | — |
### props
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------- | ------ | ------ | ------ |
| label | specify which key of option object is used as the option's label | string | — | value |
| value | specify which key of option object is used as the option's value | string | — | value |
### Autocomplete slots
| Name | Description |
......
examples/docs/en-US/tree.md
View file @ 4517e3d9
......@@ -232,18 +232,19 @@
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
append(store, data) {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
store.append(newChild, data);
data.children = data.children || [];
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(store, node, data) {
remove(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);
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
......@@ -253,8 +254,8 @@
<span>{node.label}</span>
</span>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
},
......@@ -270,6 +271,7 @@
data,
data2,
data3,
data4: JSON.parse(JSON.stringify(data2)),
regions,
defaultProps,
props,
......@@ -683,14 +685,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
:data="data2"
:data="data4"
:props="defaultProps"
show-checkbox
node-key="id"
......@@ -705,7 +703,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
export default {
data() {
return {
data2: [{
data4: [{
id: 1,
label: 'Level one 1',
children: [{
......@@ -748,18 +746,19 @@ The content of tree nodes can be customized, so you can add icons or buttons as
},
methods: {
append(store, data) {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
store.append(newChild, data); // need change data by yourself
data.children = data.children || [];
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(store, node, data) {
remove(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
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
......@@ -769,8 +768,8 @@ The content of tree nodes can be customized, so you can add icons or buttons as
<span>{node.label}</span>
</span>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
}
......@@ -939,7 +938,7 @@ Only one node among the same level can be expanded at one time.
| node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — |
| props | configuration options, see the following table | object | — | — |
| load | method for loading subtree data | function(node, resolve) | — | — |
| render-content | render function for tree node | Function(h, { node } | — | — |
| render-content | render function for tree node | Function(h, { node, data, store } | — | — |
| highlight-current | whether current node is highlighted | boolean | — | false |
| default-expand-all | whether to expand all nodes by default | boolean | — | false |
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | — | true | |
......
examples/docs/zh-CN/input.md
View file @ 4517e3d9
......@@ -816,7 +816,7 @@ export default {
|------------- |---------------- |---------------- |---------------------- |-------- |
| placeholder | 输入框占位文本 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| props | 配置选项，具体见下表 | object | — | — |
| valueKey | 输入建议对象中用于显示的键名 | string | — | value |
| value | 必填值，输入绑定值 | string | — | — |
| debounce | 获取输入建议的去抖延时 | number | — | 300 |
| fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
......@@ -826,12 +826,6 @@ export default {
| select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false |
| label | 输入框关联的label文字 | string | — | — |
### props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ----------------- | ------ | ------ | ------ |
| value | 指定选项的值为选项对象的某个属性值 | string | — | value |
| label | 指定选项标签为选项对象的某个属性值 | string | — | value |
### Autocomplete slots
| name | 说明 |
|------|--------|
......
examples/docs/zh-CN/tree.md
View file @ 4517e3d9
......@@ -232,29 +232,30 @@
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
append(store, data) {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
store.append(newChild, data);
data.children = data.children || [];
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(store, node, data) {
remove(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);
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
renderContent(h, { node, data }) {
return (
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
},
......@@ -270,6 +271,7 @@
data,
data2,
data3,
data4: JSON.parse(JSON.stringify(data2)),
regions,
defaultProps,
props,
......@@ -682,14 +684,10 @@
### 自定义节点内容
节点的内容支持自定义，可以在节点区添加按钮或图标等内容
:::warning
`append` 和 `remove` 方法不会改变 `data` 上的数据
:::
::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
```html
<el-tree
:data="data2"
:data="data4"
:props="defaultProps"
show-checkbox
node-key="id"
......@@ -704,7 +702,7 @@
export default {
data() {
return {
data2: [{
data4: [{
id: 1,
label: '一级 1',
children: [{
......@@ -747,18 +745,19 @@
},
methods: {
append(store, data) {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
store.append(newChild, data); // append 不会改变 data
data.children = data.children || [];
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(store, node, data) {
remove(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
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
......@@ -768,8 +767,8 @@
<span>{node.label}</span>
</span>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
}
......@@ -938,7 +937,7 @@
| node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | — | — |
| props | 配置选项，具体看下表 | object | — | — |
| load | 加载子树数据的方法 | function(node, resolve) | — | — |
| render-content | 树节点的内容区的渲染 Function | Function(h, { node } | — | — |
| render-content | 树节点的内容区的渲染 Function | Function(h, { node, data, store } | — | — |
| highlight-current | 是否高亮当前选中节点，默认值是 false。 | boolean | — | false |
| default-expand-all | 是否默认展开所有节点 | boolean | — | false |
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | — | true |
......
examples/pages/template/index.tpl
View file @ 4517e3d9
......@@ -23,7 +23,6 @@
width: 890px;
height: 465px;
margin: 30px auto 100px;
/*border: solid 1px black;*/
position: relative;
div {
......
package.json
View file @ 4517e3d9
......@@ -25,14 +25,14 @@
"dist:all": "node build/bin/build-all.js && npm run build:theme",
"i18n": "node build/bin/i18n.js",
"lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
"pub:all": "npm run dist:all && lerna publish --skip-git && git commit -am 'publish independent packages' && git push eleme dev",
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
"test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
},
"faas": {
"domain": "element",
"public": "examples/element-ui"
"public": "temp_web/element"
},
"repository": {
"type": "git",
......
packages/autocomplete/src/autocomplete.vue
View file @ 4517e3d9
......@@ -51,7 +51,7 @@
:aria-selected="highlightedIndex === index"
>
<slot :item="item">
{{ item[props.label] }}
{{ item[valueKey] }}
</slot>
</li>
</el-autocomplete-suggestions>
......@@ -82,14 +82,9 @@
directives: { Clickoutside },
props: {
props: {
type: Object,
default() {
return {
label: 'value',
value: 'value'
};
}
valueKey: {
type: String,
default: 'value'
},
popperClass: String,
placeholder: String,
......@@ -142,7 +137,8 @@
getMigratingConfig() {
return {
props: {
'custom-item': 'custom-item is removed, use scoped slot intstead.'
'custom-item': 'custom-item is removed, use scoped slot instead.',
'props': 'props is removed, use value-key instead.'
}
};
},
......@@ -199,7 +195,7 @@
}
},
select(item) {
this.$emit('input', item[this.props.label]);
this.$emit('input', item[this.valueKey]);
this.$emit('select', item);
this.$nextTick(_ => {
this.suggestions = [];
......
test/unit/specs/autocomplete.spec.js
View file @ 4517e3d9
......@@ -133,7 +133,7 @@ describe('Autocomplete', () => {
<el-autocomplete
v-model="state"
ref="autocomplete"
:props="{ label: 'address', value: 'name' }"
value-key="address"
:fetch-suggestions="querySearch"
placeholder="请输入内容autocomplete2"
></el-autocomplete>
......
types/autocomplete.d.ts
View file @ 4517e3d9
......@@ -34,14 +34,14 @@ export declare class ElAutocomplete extends ElementUIComponent {
/** Debounce delay when typing */
debounce: number
/** name for the inner native input */
/** Name for the inner native input */
name: string
/** whether to emit select event on enter when there is no autocomplete match */
selectWhenUnmatched: boolean
/** Key name of the input suggestion object for display */
valueKey: string
/** Component name of your customized suggestion list item */
customItem: string
/** Whether to emit select event on enter when there is no autocomplete match */
selectWhenUnmatched: boolean
/** A method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to Autocomplete */
fetchSuggestions: FetchSuggestions
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment