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>&nbsp;鍔犺浇涓€�</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