diff --git a/examples/views/docs/component/select.md b/examples/views/docs/component/select.md index e4d3695..e4c24ac 100644 --- a/examples/views/docs/component/select.md +++ b/examples/views/docs/component/select.md @@ -246,10 +246,12 @@ export default { console.log(val); return new Promise(resolve => { setTimeout(() => { - resolve([ - { name: '王五', code: 'ww' }, - { name: '赵六', code: 'zl' }, - ]); + resolve({ + result: [ + { name: '王五', code: 'ww' }, + { name: '赵六', code: 'zl' }, + ] + }); }, 1000); }); }, @@ -289,10 +291,12 @@ export default { queryAPI(val) { return new Promise(resolve => { setTimeout(() => { - resolve([ - { name: '王五', code: 'ww' }, - { name: '赵六', code: 'zl' }, - ]); + resolve({ + result: [ + { name: '王五', code: 'ww' }, + { name: '赵六', code: 'zl' }, + ] + }); }, 1000); }); }, @@ -309,7 +313,7 @@ export default { @@ -317,7 +321,11 @@ export default { export default { data() { return { - model: ['wq', 'cs'], + // model: ['wq', 'cs'], + model: [ + { name: '王七', code: 'wq' }, + { name: '陈拾', code: 'cs' }, + ], options: [ { name: '王七', code: 'wq' }, { name: '陈拾', code: 'cs' }, @@ -328,10 +336,12 @@ export default { queryAPI(val) { return new Promise(resolve => { setTimeout(() => { - resolve([ - { name: '王五', code: 'ww' }, - { name: '赵六', code: 'zl' }, - ]); + resolve({ + result: [ + { name: '王五', code: 'ww' }, + { name: '赵六', code: 'zl' }, + ] + }); }, 1000); }); }, @@ -369,12 +379,13 @@ export default { methods: { queryAPI(val) { return new Promise(resolve => { - this.label = ''; setTimeout(() => { - resolve([ - { name: '王五', code: 'ww' }, - { name: '赵六', code: 'zl' }, - ]); + resolve({ + result: [ + { name: '王五', code: 'ww' }, + { name: '赵六', code: 'zl' }, + ] + }); }, 1000); }); }, @@ -410,10 +421,12 @@ export default { queryAPI(val) { return new Promise(resolve => { setTimeout(() => { - resolve([ - { name: '王五', code: 'ww' }, - { name: '赵六', code: 'zl' }, - ]); + resolve({ + result: [ + { name: '王五', code: 'ww' }, + { name: '赵六', code: 'zl' }, + ] + }); }, 1000); }); }, @@ -449,10 +462,12 @@ selectProps | Element Select组件参数 | Object | - | - raw | 是否绑定原始对象 | Boolean | - | false url | 远程搜索URL | String | - | - http | HTTP请求库 | Function | - | - +params | 请求参数 | Object | - | {} queryApi | 自定义接口 | Function | - | - triggerSize | 触发远程搜索的字段长度 | Number | - | 0 -auto | 初始化时自动查询数据 | Boolean | - | false +auto | 初始化时自动查询数据 | Boolean | - | true update | 点开下拉框时更新数据 | Boolean | - | false +update-once | 点开下拉框时更新一次数据 | Boolean | - | false ## Events 事件 diff --git a/packages/select/index.vue b/packages/select/index.vue index e749c58..ffaf74c 100644 --- a/packages/select/index.vue +++ b/packages/select/index.vue @@ -81,6 +81,16 @@ export default { url: String, // HTTP请求库 http: Function, + // 请求参数 + params: { + type: Object, + default: () => ({}), + }, + // 请求配置 + config: { + type: Object, + default: () => ({}), + }, // 自定义接口 queryApi: Function, // 触发远程搜索的字段长度 @@ -88,8 +98,12 @@ export default { type: Number, default: 0, }, - auto: Boolean, + auto: { + type: Boolean, + default: true, + }, update: Boolean, + updateOnce: Boolean, }, data() { return { @@ -98,6 +112,7 @@ export default { optionsCurrent: this.fixOptions(this.options), loading: false, initing: false, + loaded: false, }; }, created() { @@ -144,8 +159,14 @@ export default { return { ..._events, 'visible-change': show => { - if (this.remote && this.update && show) { - this.remoteMethod(); + if (this.remote && show) { + if (this.updateOnce) { + if (!this.loaded) { + this.remoteMethod(); + } + } else if (this.update) { + this.remoteMethod(); + } } _events['visible-change'] && _events['visible-change'](show); }, @@ -155,64 +176,24 @@ export default { methods: { // 修复当前数据源包含当前选中项 fixOptions(list) { - if (!this.value || (this.value instanceof Array && this.value.length === 0) || (this.value instanceof Object && Object.keys(this.value).length === 0)) { - return list; - } + let fixOptions = []; if (this.raw) { - // 绑定为对象值时修复默认项 - let fixOptions = []; - let defaultOptions = []; if (this.multiple) { - fixOptions = [...this.value]; - this.options.forEach(item => { - if (this.value.find(i => i[this.valueKey] === item[this.valueKey])) { - defaultOptions.push(item); - } - }); + fixOptions = this.value && this.value.length > 0 ? [...this.value] : []; } else { - fixOptions = [this.value]; - this.options.forEach(item => { - if (item[this.valueKey] === this.value[this.valueKey]) { - defaultOptions.push(item); - } - }); + fixOptions = this.value && Object.keys(this.value).length > 0 ? [this.value] : []; } - let hash = {}; - const options = [...fixOptions, ...defaultOptions, ...list].reduce((result, item) => { - if (!hash[item[this.valueKey]]) { - // 如果当前元素的key值没有在hash对象里,则可放入最终结果数组 - hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象 - result.push(item); // 把当前元素放入结果数组 - } - return result; // 返回结果数组 - }, []); - return options; - } else { - // 绑定为非对象值时修复默认项 - let defaultOptions = []; - if (this.multiple) { - this.options.forEach(item => { - if (this.value.find(i => i === item[this.valueKey])) { - defaultOptions.push(item); - } - }); - } else { - const targetOption = this.options.find(item => item[this.valueKey] === this.value); - if (targetOption) { - defaultOptions = [targetOption]; - } - } - let hash = {}; - const options = [...defaultOptions, ...list].reduce((result, item) => { - if (!hash[item[this.valueKey]]) { - // 如果当前元素的key值没有在hash对象里,则可放入最终结果数组 - hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象 - result.push(item); // 把当前元素放入结果数组 - } - return result; // 返回结果数组 - }, []); - return options; } + let hash = {}; + const options = [...fixOptions, ...this.options, ...list].reduce((result, item) => { + if (!hash[item[this.valueKey]]) { + // 如果当前元素的key值没有在hash对象里,则可放入最终结果数组 + hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象 + item[this.valueKey] && item[this.labelKey] && result.push(item); // 把当前元素放入结果数组 + } + return result; // 返回结果数组 + }, []); + return options; }, // 远程加载 remoteMethod(val = '') { @@ -226,23 +207,21 @@ export default { requestPrimise = this.request({ url: this.url, method: 'get', - params: searchText ? { [this.searchKey]: searchText } : {}, + params: searchText ? { [this.searchKey]: searchText, ...this.params } : this.params, + ...this.config, }); } requestPrimise - .then(list => { - const options = this.fixOptions(list); + .then(res => { + const response = res || {}; + const options = this.fixOptions(response.result); this.optionsDataSource = options; this.optionsCurrent = options; - // 获取到选项数据源时刷新绑定显示值 - this.model = undefined; - this.$nextTick(() => { - this.model = this.value; - }); }) .finally(() => { this.loading = false; this.initing = false; + this.loaded = true; }); } else { this.optionsCurrent = this.optionsDataSource.filter(item => { -- libgit2 0.21.0