From 92028a7e4450ccda1c2e2f19b37ae2837aa3d4cf Mon Sep 17 00:00:00 2001 From: zhangdaiscott <zhangdaiscott@163.com> Date: Fri, 20 Aug 2021 11:13:42 +0800 Subject: [PATCH] =?UTF-8?q?JVXETable=E6=8F=90=E4=BE=9B=E6=9B=B4=E4=BE=BF?= =?UTF-8?q?=E6=8D=B7=E7=9A=84=E4=B8=89=E7=BA=A7=E8=81=94=E5=8A=A8=E6=9C=BA?= =?UTF-8?q?=E5=88=B6,=E8=A7=A3=E5=86=B3=E8=81=94=E5=8A=A8=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E4=B8=8E=E9=80=89=E6=8B=A9BUG=20#2867?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../jeecg/JVxeTable/components/JVxeTable.js | 178 +++++++++++- .../components/cells/JVxeSelectCell.vue | 76 ++++- .../jeecg/JVxeTable/mixins/JVxeCellMixins.js | 8 +- .../src/views/jeecg/JVxeDemo/JVxeDemo3.vue | 266 +++++++++++------- 4 files changed, 408 insertions(+), 120 deletions(-) diff --git a/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/JVxeTable.js b/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/JVxeTable.js index fdde8009..c1a18590 100644 --- a/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/JVxeTable.js +++ b/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/JVxeTable.js @@ -98,6 +98,8 @@ export default { // 鏄惁涓€鐩存樉绀虹粍浠讹紝濡傛灉涓篺alse鍒欏彧鏈夌偣鍑荤殑鏃跺€欐墠鍑虹幇缁勪欢 // 娉細璇ュ弬鏁颁笉鑳藉姩鎬佷慨鏀癸紱濡傛灉琛屻€佸垪瀛楁澶氱殑鎯呭喌涓嬶紝浼氭牴鎹満鍣ㄦ€ц兘閫犳垚涓嶅悓绋嬪害鐨勫崱椤裤€� alwaysEdit: PropTypes.bool.def(false), + // 鑱斿姩閰嶇疆锛屾暟缁勶紝璇︽儏閰嶇疆瑙佹枃妗� + linkageConfig: PropTypes.array.def(() => []), }, data() { return { @@ -151,7 +153,10 @@ export default { // 鍏佽鎵ц鍒锋柊鐗规晥鐨勮ID reloadEffectRowKeysMap: {}, //閰嶇疆浜嗕絾鏄病鏈夋巿鏉冪殑鎸夐挳鍜屽垪 闆嗗悎 - excludeCode:[] + excludeCode:[], + // 鑱斿姩涓嬫媺閫夐」锛堢敤浜庨殧绂讳笉鍚岀殑涓嬫媺閫夐」锛� + // 鍐呴儴鑱斿姩閰嶇疆锛宮ap + _innerLinkageConfig: null, } }, computed: { @@ -178,6 +183,18 @@ export default { renderOptions.target = this } } + // 澶勭悊鑱斿姩鍒楋紝鑱斿姩鍒楀彧鑳戒綔鐢ㄤ簬 select 缁勪欢 + if (column.$type === JVXETypes.select && this._innerLinkageConfig != null) { + // 鍒ゆ柇褰撳墠鍒楁槸鍚︽槸鑱斿姩鍒� + if (this._innerLinkageConfig.has(column.key)) { + renderOptions.linkage = { + config: this._innerLinkageConfig.get(column.key), + getLinkageOptionsSibling: this.getLinkageOptionsSibling, + getLinkageOptionsAsync: this.getLinkageOptionsAsync, + linkageSelectChange: this.linkageSelectChange, + } + } + } if (column.editRender) { Object.assign(column.editRender, renderOptions) } @@ -278,15 +295,21 @@ export default { immediate: true, async handler() { let vxe = await getRefPromise(this, 'vxe') - // 闃绘柇vue鐩戝惉澶ф暟鎹紝鎻愰珮鎬ц兘 - // 寮€鍚簡鎺掑簭灏辫嚜鍔ㄨ绠楁帓搴忓€� - if (this.dragSort) { - this.dataSource.forEach((data, idx) => { + this.dataSource.forEach((data, idx) => { + // 寮€鍚簡鎺掑簭灏辫嚜鍔ㄨ绠楁帓搴忓€� + if (this.dragSort) { this.$set(data, this.dragSortKey, idx + 1) - }) - } + } + // 澶勭悊鑱斿姩鍥炴樉鏁版嵁 + if (this._innerLinkageConfig != null) { + for (let configItem of this._innerLinkageConfig.values()) { + this.autoSetLinkageOptionsByData(data, '', configItem, 0) + } + } + }) + // 闃绘柇vue鐩戝惉澶ф暟鎹紝鎻愰珮鎬ц兘 vxe.loadData(this.dataSource) // TODO 瑙f瀽disabledRows @@ -469,7 +492,40 @@ export default { this._innerColumns = _innerColumns this._innerEditRules = _innerEditRules } - } + }, + // watch linkageConfig + // 鏁寸悊澶氱骇鑱斿姩閰嶇疆 + linkageConfig: { + immediate: true, + handler() { + if (Array.isArray(this.linkageConfig) && this.linkageConfig.length > 0) { + // 鑾峰彇鑱斿姩鐨刱ey椤哄簭 + let getLcKeys = (key, arr) => { + let col = this._innerColumns.find(col => col.key === key) + if (col) { + arr.push(col.key) + if (col.linkageKey) { + return getLcKeys(col.linkageKey, arr) + } + } + return arr + } + let configMap = new Map() + this.linkageConfig.forEach(lc => { + let keys = getLcKeys(lc.key, []) + // 澶氫釜key鍏变韩涓€涓紝寮曠敤鍦板潃 + let configItem = { + ...lc, keys, + optionsMap: new Map() + } + keys.forEach(k => configMap.set(k, configItem)) + }) + this._innerLinkageConfig = configMap + } else { + this._innerLinkageConfig = null + } + } + }, }, created() { }, @@ -671,6 +727,19 @@ export default { // issues/2784 // 鍏堟竻绌烘墍鏈夋暟鎹� xTable.loadData([]) + + dataSource.forEach((data, idx) => { + // 寮€鍚簡鎺掑簭灏辫嚜鍔ㄨ绠楁帓搴忓€� + if (this.dragSort) { + this.$set(data, this.dragSortKey, idx + 1) + } + // 澶勭悊鑱斿姩鍥炴樉鏁版嵁 + if (this._innerLinkageConfig != null) { + for (let configItem of this._innerLinkageConfig.values()) { + this.autoSetLinkageOptionsByData(data, '', configItem, 0) + } + } + }) // 鍐嶆柊澧� return xTable.insertAt(dataSource) } @@ -797,6 +866,7 @@ export default { * 娣诲姞涓€琛屾垨澶氳 * * @param rows + * @param isOnlJs 鏄惁鏄痮nlineJS澧炲己瑙﹀彂鐨� * @return */ async addRows(rows = {}, isOnlJs) { @@ -896,6 +966,89 @@ export default { this.$emit(name, event) }, + /** 銆愬绾ц仈鍔ㄣ€戣幏鍙栧悓绾ц仈鍔ㄤ笅鎷夐€夐」 */ + getLinkageOptionsSibling(row, col, config, request) { + // 濡傛灉褰撳墠鍒椾笉鏄《绾у垪 + let key = '' + if (col.key !== config.key) { + // 灏辨壘鍑鸿仈鍔ㄤ笂绾у垪 + let idx = config.keys.findIndex(k => col.key === k) + let parentKey = config.keys[idx - 1] + key = row[parentKey] + // 濡傛灉鑱斿姩涓婄骇鍒楁病鏈夐€夋嫨鏁版嵁锛屽氨鐩存帴杩斿洖绌烘暟缁� + if (key === '' || key == null) { + return [] + } + } else { + key = 'root' + } + let options = config.optionsMap.get(key) + if (!Array.isArray(options)) { + if (request) { + let parent = key === 'root' ? '' : key + return this.getLinkageOptionsAsync(config, parent) + } else { + options = [] + } + } + return options + }, + /** 銆愬绾ц仈鍔ㄣ€戣幏鍙栬仈鍔ㄤ笅鎷夐€夐」锛堝紓姝ワ級 */ + getLinkageOptionsAsync(config, parent) { + return new Promise(resolve => { + let key = parent ? parent : 'root' + let options + if (config.optionsMap.has(key)) { + options = config.optionsMap.get(key) + if (options instanceof Promise) { + options.then(opt => { + config.optionsMap.set(key, opt) + resolve(opt) + }) + } else { + resolve(options) + } + } else if (typeof config.requestData === 'function') { + // 璋冪敤requestData鏂规硶锛岄€氳繃浼犲叆parent鏉ヨ幏鍙栧瓙绾� + let promise = config.requestData(parent) + config.optionsMap.set(key, promise) + promise.then(opt => { + config.optionsMap.set(key, opt) + resolve(opt) + }) + } else { + resolve([]) + } + }) + }, + // 銆愬绾ц仈鍔ㄣ€� 鐢ㄤ簬鍥炴樉鏁版嵁锛岃嚜鍔ㄥ~鍏� optionsMap + autoSetLinkageOptionsByData(data, parent, config, level) { + if (level === 0) { + this.getLinkageOptionsAsync(config, '') + } else { + this.getLinkageOptionsAsync(config, parent) + } + if (config.keys.length - 1 > level) { + let value = data[config.keys[level]] + if (value) { + this.autoSetLinkageOptionsByData(data, value, config, level + 1) + } + } + }, + // 銆愬绾ц仈鍔ㄣ€戣仈鍔ㄧ粍浠禼hange鏃讹紝娓呯┖涓嬬骇缁勪欢 + linkageSelectChange(row, col, config, value) { + if (col.linkageKey) { + this.getLinkageOptionsAsync(config, value) + let idx = config.keys.findIndex(k => k === col.key) + let values = {} + for (let i = idx; i < config.keys.length; i++) { + values[config.keys[i]] = '' + } + // 娓呯┖鍚庡嚑鍒楃殑鏁版嵁 + this.setValues([{rowKey: row.id, values}]) + } + }, + /** 鍔犺浇鏁版嵁瀛楀吀骞跺悎骞跺埌 options */ _loadDictConcatToOptions(column) { initDictOptions(column.dictCode).then((res) => { @@ -1088,6 +1241,15 @@ export default { let createValue = getEnhancedMixins(col.$type || col.type, 'createValue') record[col.key] = createValue({row: record, column, $table: xTable}) } + // update-begin--author:sunjianlei---date:20210819------for: 澶勭悊鑱斿姩鍒楋紝鑱斿姩鍒楀彧鑳戒綔鐢ㄤ簬 select 缁勪欢 + if (col.$type === JVXETypes.select && this._innerLinkageConfig != null) { + // 鍒ゆ柇褰撳墠鍒楁槸鍚︽槸鑱斿姩鍒� + if (this._innerLinkageConfig.has(col.key)) { + let configItem = this._innerLinkageConfig.get(col.key) + this.getLinkageOptionsAsync(configItem, '') + } + } + // update-end--author:sunjianlei---date:20210819------for: 澶勭悊鑱斿姩鍒楋紝鑱斿姩鍒楀彧鑳戒綔鐢ㄤ簬 select 缁勪欢 }) return record }, diff --git a/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/cells/JVxeSelectCell.vue b/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/cells/JVxeSelectCell.vue index a56102ec..14d8ef69 100644 --- a/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/cells/JVxeSelectCell.vue +++ b/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/components/cells/JVxeSelectCell.vue @@ -7,11 +7,16 @@ v-bind="selectProps" style="width: 100%;" @blur="handleBlur" - @change="handleChangeCommon" + @change="handleChange" @search="handleSearchSelect" > - <template v-for="option of originColumn.options"> + <div v-if="loading" slot="notFoundContent"> + <a-icon type="loading" /> + <span> 鍔犺浇涓€�</span> + </div> + + <template v-for="option of selectOptions"> <a-select-option :key="option.value" :value="option.value" :disabled="option.disabled"> <span>{{option.text || option.label || option.title|| option.value}}</span> </a-select-option> @@ -23,10 +28,18 @@ <script> import JVxeCellMixins, { dispatchEvent } from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins' import { JVXETypes } from '@comp/jeecg/JVxeTable/index' + import { filterDictText } from '@comp/dict/JDictSelectUtil' export default { name: 'JVxeSelectCell', mixins: [JVxeCellMixins], + data(){ + return { + loading: false, + // 寮傛鍔犺浇鐨刼ptions锛堢敤浜庡绾ц仈鍔級 + asyncOptions: null, + } + }, computed: { selectProps() { let props = {...this.cellProps} @@ -37,6 +50,32 @@ } return props }, + // 涓嬫媺閫夐」 + selectOptions() { + if (this.asyncOptions) { + return this.asyncOptions + } + let {linkage} = this.renderOptions + if (linkage) { + let {getLinkageOptionsSibling, config} = linkage + let res = getLinkageOptionsSibling(this.row, this.originColumn, config, true) + // 褰撹繑鍥濸romise鏃讹紝璇存槑鏄绾ц仈鍔� + if (res instanceof Promise) { + this.loading = true + res.then(opt => { + this.asyncOptions = opt + this.loading = false + }).catch(e => { + console.error(e) + this.loading = false + }) + } else { + this.asyncOptions = null + return res + } + } + return this.originColumn.options + }, }, created() { let multiple = [JVXETypes.selectMultiple, JVXETypes.list_multi] @@ -54,6 +93,16 @@ }, methods: { + handleChange(value) { + debugger + // 澶勭悊涓嬬骇鑱斿姩 + let linkage = this.renderOptions.linkage + if (linkage) { + linkage.linkageSelectChange(this.row, this.originColumn, linkage.config, value) + } + this.handleChangeCommon(value) + }, + /** 澶勭悊blur澶卞幓鐒︾偣浜嬩欢 */ handleBlur(value) { let {allowInput, options} = this.originColumn @@ -120,7 +169,28 @@ dispatchEvent.call(this, event, 'ant-select') }, }, - translate: {enabled: true}, + translate: { + enabled: true, + async handler(value,) { + let options + let {linkage} = this.renderOptions + // 鍒ゆ柇鏄惁鏄绾ц仈鍔紝濡傛灉鏄氨閫氳繃鎺ュ彛寮傛缈昏瘧 + if (linkage) { + let {getLinkageOptionsSibling, config} = linkage + options = getLinkageOptionsSibling(this.row, this.originColumn, config, true) + if (options instanceof Promise) { + return new Promise(resolve => { + options.then(opt => { + resolve(filterDictText(opt, value)) + }) + }) + } + } else { + options = this.column.own.options + } + return filterDictText(options, value) + }, + }, getValue(value) { if (Array.isArray(value)) { return value.join(',') diff --git a/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/mixins/JVxeCellMixins.js b/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/mixins/JVxeCellMixins.js index 3d2aa8d0..23aa765b 100644 --- a/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/mixins/JVxeCellMixins.js +++ b/ant-design-vue-jeecg/src/components/jeecg/JVxeTable/mixins/JVxeCellMixins.js @@ -102,7 +102,13 @@ export default { // 鍒ゆ柇鏄惁鍚敤缈昏瘧 if (this.renderType === JVXERenderType.spaner && this.enhanced.translate.enabled) { - this.innerValue = this.enhanced.translate.handler.call(this, value) + let res = this.enhanced.translate.handler.call(this, value) + // 寮傛缈昏瘧锛岀洰鍓嶄粎銆愬绾ц仈鍔ㄣ€戜娇鐢� + if (res instanceof Promise) { + res.then(value => this.innerValue = value) + } else { + this.innerValue = res + } } }, }, diff --git a/ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/JVxeDemo3.vue b/ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/JVxeDemo3.vue index 016165aa..91ac1421 100644 --- a/ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/JVxeDemo3.vue +++ b/ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/JVxeDemo3.vue @@ -8,123 +8,173 @@ :height="484" :dataSource="dataSource" :columns="columns" - @valueChange="handleValueChange" + :linkage-config="linkageConfig" /> </template> <script> - import moment from 'moment' - import { randomNumber, randomUUID } from '@/utils/util' - import { JVXETypes } from '@/components/jeecg/JVxeTable' +import { JVXETypes } from '@/components/jeecg/JVxeTable' - export default { - name: 'JVxeDemo2', - data() { - return { - columns: [ - { - title: '鐪�/鐩磋緰甯�/鑷不鍖�', - key: 's1', - type: JVXETypes.select, - width: '240px', - options: [], - placeholder: '璇烽€夋嫨${title}' - }, - { - title: '甯�', - key: 's2', - type: JVXETypes.select, - width: '240px', - options: [], - placeholder: '璇烽€夋嫨${title}' - }, - { - title: '鍘�/鍖�', - key: 's3', - type: JVXETypes.select, - width: '240px', - options: [], - placeholder: '璇烽€夋嫨${title}' - } - ], - dataSource: [], - - mockData: [ - { text: '鍖椾含甯�', value: '110000', parent: null }, - { text: '澶╂触甯�', value: '120000', parent: null }, - { text: '娌冲寳鐪�', value: '130000', parent: null }, - { text: '涓婃捣甯�', value: '310000', parent: null }, - - { text: '鍖椾含甯�', value: '110100', parent: '110000' }, - { text: '澶╂触甯傚競', value: '120100', parent: '120000' }, - { text: '鐭冲搴勫競', value: '130100', parent: '130000' }, - { text: '鍞愬北甯�', value: '130200', parent: '130000' }, - { text: '绉︾殗宀涘競', value: '130300', parent: '130000' }, - { text: '涓婃捣甯�', value: '310100', parent: '310000' }, - - { text: '涓滃煄鍖�', value: '110101', parent: '110100' }, - { text: '瑗垮煄鍖�', value: '110102', parent: '110100' }, - { text: '鏈濋槼鍖�', value: '110105', parent: '110100' }, - { text: '鍜屽钩鍖�', value: '120101', parent: '120100' }, - { text: '娌充笢鍖�', value: '120102', parent: '120100' }, - { text: '娌宠タ鍖�', value: '120103', parent: '120100' }, - { text: '榛勬郸鍖�', value: '310101', parent: '310100' }, - { text: '寰愭眹鍖�', value: '310104', parent: '310100' }, - { text: '闀垮畞鍖�', value: '310105', parent: '310100' }, - { text: '闀垮畨鍖�', value: '130102', parent: '130100' }, - { text: '妗ヨタ鍖�', value: '130104', parent: '130100' }, - { text: '鏂板崕鍖�', value: '130105', parent: '130100' }, - { text: '璺崡鍖�', value: '130202', parent: '130200' }, - { text: '璺寳鍖�', value: '130203', parent: '130200' }, - { text: '鍙ゅ喍鍖�', value: '130204', parent: '130200' }, - { text: '娴锋腐鍖�', value: '130302', parent: '130300' }, - { text: '灞辨捣鍏冲尯', value: '130303', parent: '130300' }, - { text: '鍖楁埓娌冲尯', value: '130304', parent: '130300' }, - ] - } +export default { + name: 'JVxeDemo2', + data() { + return { + // 鑱斿姩閰嶇疆 + linkageConfig: [ + {requestData: this.requestData, key: 's1'}, + // 鍙厤缃涓仈鍔� + {requestData: this.loadData, key: 'level1',}, + ], + columns: [ + { + title: '鎬у埆', + key: 'sex', + type: JVXETypes.select, + dictCode: 'sex', + width: '180px', + placeholder: '璇烽€夋嫨${title}', + }, + { + title: '鐪�/鐩磋緰甯�/鑷不鍖�', + key: 's1', + type: JVXETypes.select, + width: '180px', + placeholder: '璇烽€夋嫨${title}', + // 鑱斿姩瀛楁锛堝嵆涓嬩竴绾х殑瀛楁锛� + linkageKey: 's2', + }, + { + title: '甯�', + key: 's2', + type: JVXETypes.select, + width: '180px', + placeholder: '璇烽€夋嫨${title}', + // 鑱斿姩瀛楁锛堝嵆涓嬩竴绾х殑瀛楁锛� + linkageKey: 's3', + }, + { + title: '鍘�/鍖�', + key: 's3', + type: JVXETypes.select, + width: '180px', + options: [], + placeholder: '璇烽€夋嫨${title}', + }, + { + title: '涓€绾�', + key: 'level1', + type: JVXETypes.select, + width: '180px', + placeholder: '璇烽€夋嫨${title}', + // 鑱斿姩瀛楁锛堝嵆涓嬩竴绾х殑瀛楁锛� + linkageKey: 'level2', + }, + { + title: '浜岀骇', + key: 'level2', + type: JVXETypes.select, + width: '180px', + placeholder: '璇烽€夋嫨${title}', + // 鑱斿姩瀛楁锛堝嵆涓嬩竴绾х殑瀛楁锛� + linkageKey: 'level3', + }, + { + title: '涓夌骇', + key: 'level3', + type: JVXETypes.select, + width: '180px', + placeholder: '璇烽€夋嫨${title}', + } + ], + dataSource: [ + {sex: '1', s1: '110000', s2: '110100', s3: '110101', level1: '1', level2: '3', level3: '7'}, + {sex: '2', s1: '130000', s2: '130300', s3: '130303', level1: '2', level2: '6', level3: '14'}, + ], + // 妯℃嫙鏁版嵁 + mockData: [ + {text: '鍖椾含甯�', value: '110000', parent: ''}, + {text: '澶╂触甯�', value: '120000', parent: ''}, + {text: '娌冲寳鐪�', value: '130000', parent: ''}, + {text: '涓婃捣甯�', value: '310000', parent: ''}, + {text: '鍖椾含甯�', value: '110100', parent: '110000'}, + {text: '澶╂触甯傚競', value: '120100', parent: '120000'}, + {text: '鐭冲搴勫競', value: '130100', parent: '130000'}, + {text: '鍞愬北甯�', value: '130200', parent: '130000'}, + {text: '绉︾殗宀涘競', value: '130300', parent: '130000'}, + {text: '涓婃捣甯�', value: '310100', parent: '310000'}, + + {text: '涓滃煄鍖�', value: '110101', parent: '110100'}, + {text: '瑗垮煄鍖�', value: '110102', parent: '110100'}, + {text: '鏈濋槼鍖�', value: '110105', parent: '110100'}, + {text: '鍜屽钩鍖�', value: '120101', parent: '120100'}, + {text: '娌充笢鍖�', value: '120102', parent: '120100'}, + {text: '娌宠タ鍖�', value: '120103', parent: '120100'}, + {text: '榛勬郸鍖�', value: '310101', parent: '310100'}, + {text: '寰愭眹鍖�', value: '310104', parent: '310100'}, + {text: '闀垮畞鍖�', value: '310105', parent: '310100'}, + {text: '闀垮畨鍖�', value: '130102', parent: '130100'}, + {text: '妗ヨタ鍖�', value: '130104', parent: '130100'}, + {text: '鏂板崕鍖�', value: '130105', parent: '130100'}, + {text: '璺崡鍖�', value: '130202', parent: '130200'}, + {text: '璺寳鍖�', value: '130203', parent: '130200'}, + {text: '鍙ゅ喍鍖�', value: '130204', parent: '130200'}, + {text: '娴锋腐鍖�', value: '130302', parent: '130300'}, + {text: '灞辨捣鍏冲尯', value: '130303', parent: '130300'}, + {text: '鍖楁埓娌冲尯', value: '130304', parent: '130300'}, + ], + mockData1: [ + {id: '1', name: '鍥句功棣�', parentId: '0'}, + {id: '2', name: '鐢靛奖闄�', parentId: '0'}, + + {id: '3', name: '涓€妤�', parentId: '1'}, + {id: '4', name: '浜屾ゼ', parentId: '1'}, + {id: '5', name: '涓奖鏄熺編', parentId: '2'}, + {id: '6', name: '涓囪揪鍥介檯', parentId: '2'}, + + {id: '7', name: '鎶€鏈浘涔�', parentId: '3'}, + {id: '8', name: '璐㈠姟鍥句功', parentId: '3'}, + {id: '9', name: '鍎跨鍥句功', parentId: '4'}, + {id: '10', name: '鍔卞織鍥句功', parentId: '4'}, + {id: '11', name: '1鍙峰巺', parentId: '5'}, + {id: '12', name: '2鍙峰巺', parentId: '5'}, + {id: '13', name: 'I-MAX鍘�', parentId: '6'}, + {id: '14', name: '3D鍘�', parentId: '6'}, + ], + } + }, + methods: { + /** + * 妯℃嫙浠庡悗鍙版煡璇㈡暟鎹� + */ + requestData(parent) { + return new Promise((resolve, reject) => { + let data = this.mockData.filter(i => i.parent === parent) + setTimeout(() => { + resolve(data) + }, 500) + }) }, - created() { - // 鍒濆鍖栨暟鎹� - this.columns[0].options = this.request(null) - }, - methods: { - - request(parentId) { - return this.mockData.filter(i => i.parent === parentId) - }, - - /** 褰撻€夐」琚敼鍙樻椂锛岃仈鍔ㄥ叾浠栫粍浠� */ - handleValueChange(event) { - const { type, row, column, value, target } = event - console.log("event",event) - if (type === JVXETypes.select) { - - // 绗竴鍒� - if (column.key === 's1') { - // 璁剧疆绗簩鍒楃殑 options - console.log('this.request(value)::',this.request(value)) - target.$refs.vxe.columns[3].options = this.request(value) - // 娓呯┖鍚庝袱鍒楃殑鏁版嵁 - target.setValues([{ - rowKey: row.id, - values: { s2: '', s3: '' } - }]) - target.$refs.vxe.columns[4].options = [] - } else - // 绗簩鍒� - if (column.key === 's2') { - target.$refs.vxe.columns[4].options = this.request(value) - target.setValues([{ - rowKey: row.id, - values: { s3: '' } - }]) + + // 妯℃嫙鍔犺浇鏁版嵁锛屾ā鎷熸暟鎹牸寮忎笉鍚岀殑鎯呭喌涓嬪浣曠粍瑁呮暟鎹� + async loadData(parent) { + return new Promise((resolve, reject) => { + let parentId = parent === '' ? '0' : parent + let data = this.mockData1.filter(i => i.parentId === parentId) + data = data.map(item => { + return { + // 蹇呴』鍖呭惈浠ヤ笅涓や釜瀛楁 + value: item.id, + text: item.name, } - } - - } - } + }) + setTimeout(() => { + resolve(data) + }, 500) + }) + }, } +} </script> <style scoped> -- GitLab