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 瑙ｆ瀽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