forked from github/dataease
Merge pull request #2362 from dataease/pr@dev@perf_tree_filter
perf: 优化树形过滤器
This commit is contained in:
commit
9cd3da04a2
@ -94,7 +94,8 @@
|
|||||||
"script-ext-html-webpack-plugin": "2.1.3",
|
"script-ext-html-webpack-plugin": "2.1.3",
|
||||||
"script-loader": "^0.7.2",
|
"script-loader": "^0.7.2",
|
||||||
"serve-static": "^1.13.2",
|
"serve-static": "^1.13.2",
|
||||||
"vue-template-compiler": "2.6.10"
|
"vue-template-compiler": "2.6.10",
|
||||||
|
"vuetify": "^2.6.6"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=8.9",
|
"node": ">=8.9",
|
||||||
|
@ -408,6 +408,7 @@ export default {
|
|||||||
// 树点击
|
// 树点击
|
||||||
_treeNodeClickFun(data, node, vm) {
|
_treeNodeClickFun(data, node, vm) {
|
||||||
const { multiple } = this.selectParams
|
const { multiple } = this.selectParams
|
||||||
|
if (multiple) return // 多选 不允许点击节点
|
||||||
const { clickParent } = this.treeParams
|
const { clickParent } = this.treeParams
|
||||||
const checkStrictly = this.treeParams['check-strictly']
|
const checkStrictly = this.treeParams['check-strictly']
|
||||||
const { propsValue, propsChildren, propsDisabled } = this
|
const { propsValue, propsChildren, propsDisabled } = this
|
||||||
@ -481,16 +482,42 @@ export default {
|
|||||||
this.$emit('check', data, node, vm)
|
this.$emit('check', data, node, vm)
|
||||||
this._emitFun()
|
this._emitFun()
|
||||||
},
|
},
|
||||||
|
allKidIds(node, ids) {
|
||||||
|
ids = ids || []
|
||||||
|
if (!node) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const stack = []
|
||||||
|
stack.push(node)
|
||||||
|
let tmpNode
|
||||||
|
while (stack.length > 0) {
|
||||||
|
tmpNode = stack.pop()
|
||||||
|
ids.push(tmpNode.id)
|
||||||
|
if (tmpNode.children && tmpNode.children.length > 0) {
|
||||||
|
var i = tmpNode.children.length - 1
|
||||||
|
for (i = tmpNode.children.length - 1; i >= 0; i--) {
|
||||||
|
stack.push(tmpNode.children[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ids
|
||||||
|
},
|
||||||
// 下拉框移除tag时触发
|
// 下拉框移除tag时触发
|
||||||
_selectRemoveTag(tag) {
|
_selectRemoveTag(tag) {
|
||||||
const { data, propsValue, propsLabel, propsChildren } = this
|
const { data, propsValue, propsLabel, propsChildren } = this
|
||||||
|
const { multiple } = this.selectParams
|
||||||
each(
|
each(
|
||||||
data,
|
data,
|
||||||
item => {
|
item => {
|
||||||
const labels = this.showParent ? this.cascadeLabels(item) : item[propsLabel]
|
const labels = this.showParent ? this.cascadeLabels(item) : item[propsLabel]
|
||||||
if (labels === tag) {
|
if (labels === tag) {
|
||||||
const value = item[propsValue]
|
if (multiple && item.children && item.children.length) {
|
||||||
this.ids = this.ids.filter(id => id !== value)
|
const needCancelIds = this.allKidIds(item) || []
|
||||||
|
this.ids = this.ids.filter(id => !needCancelIds.includes(id))
|
||||||
|
} else {
|
||||||
|
const value = item[propsValue]
|
||||||
|
this.ids = this.ids.filter(id => id !== value)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
propsChildren
|
propsChildren
|
||||||
|
@ -129,7 +129,8 @@ export default {
|
|||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.deSelectTree && this.$refs.deSelectTree.treeDataUpdateFun(this.datas)
|
this.$refs.deSelectTree && this.$refs.deSelectTree.treeDataUpdateFun(this.datas)
|
||||||
})
|
})
|
||||||
}) || (this.element.options.value = '')
|
})
|
||||||
|
this.element.options.value = ''
|
||||||
},
|
},
|
||||||
'element.options.attrs.multiple': function(value, old) {
|
'element.options.attrs.multiple': function(value, old) {
|
||||||
if (typeof old === 'undefined' || value === old) return
|
if (typeof old === 'undefined' || value === old) return
|
||||||
|
@ -2,6 +2,7 @@ import Vue from 'vue'
|
|||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
import '@/styles/index.scss' // global css
|
import '@/styles/index.scss' // global css
|
||||||
import ElementUI from 'element-ui'
|
import ElementUI from 'element-ui'
|
||||||
|
import Vuetify from 'vuetify'
|
||||||
import Fit2CloudUI from 'fit2cloud-ui'
|
import Fit2CloudUI from 'fit2cloud-ui'
|
||||||
|
|
||||||
import i18n from './lang' // internationalization
|
import i18n from './lang' // internationalization
|
||||||
@ -51,7 +52,7 @@ Vue.use(fullscreen)
|
|||||||
import VueFriendlyIframe from 'vue-friendly-iframe'
|
import VueFriendlyIframe from 'vue-friendly-iframe'
|
||||||
|
|
||||||
Vue.use(VueFriendlyIframe)
|
Vue.use(VueFriendlyIframe)
|
||||||
|
Vue.use(Vuetify)
|
||||||
// import TEditor from '@/components/Tinymce/index.vue'
|
// import TEditor from '@/components/Tinymce/index.vue'
|
||||||
// Vue.component('TEditor', TEditor)
|
// Vue.component('TEditor', TEditor)
|
||||||
|
|
||||||
|
@ -5,17 +5,18 @@
|
|||||||
<div class="field-content">
|
<div class="field-content">
|
||||||
|
|
||||||
<div class="field-content-right">
|
<div class="field-content-right">
|
||||||
<el-row style="display:inline-flex;height: 32px;width: auto;">
|
<el-row style="display:inline-flex;height: 32px;width: 100%;">
|
||||||
<draggable
|
<draggable
|
||||||
v-model="element.options.attrs.dragItems"
|
v-model="element.options.attrs.dragItems"
|
||||||
|
tag="v-layout"
|
||||||
group="dimension"
|
group="dimension"
|
||||||
animation="300"
|
animation="300"
|
||||||
:move="onMove"
|
:move="onMove"
|
||||||
class="theme-drag"
|
class="row wrap justify-space-around theme-drag"
|
||||||
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
|
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
|
||||||
@end="end2"
|
@end="end2"
|
||||||
>
|
>
|
||||||
<div class="list-group-container">
|
<!-- <div class="list-group-container">
|
||||||
<drag-item
|
<drag-item
|
||||||
v-for="(item,index) in element.options.attrs.dragItems"
|
v-for="(item,index) in element.options.attrs.dragItems"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
@ -23,8 +24,21 @@
|
|||||||
:index="index"
|
:index="index"
|
||||||
@closeItem="closeItem"
|
@closeItem="closeItem"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div> -->
|
||||||
<transition-group class="list-group" :data-value="$t('panel.drag_here')" />
|
<v-flex v-for="(item,index) in element.options.attrs.dragItems" :key="item.id">
|
||||||
|
|
||||||
|
<drag-item :key="item.id" :item="item" :index="index" @closeItem="closeItem" />
|
||||||
|
</v-flex>
|
||||||
|
<!-- <transition-group class="list-group" :data-value="$t('panel.drag_here')">
|
||||||
|
<drag-item
|
||||||
|
v-for="(item,index) in element.options.attrs.dragItems"
|
||||||
|
:key="item.id"
|
||||||
|
:item="item"
|
||||||
|
:index="index"
|
||||||
|
@closeItem="closeItem"
|
||||||
|
/>
|
||||||
|
</transition-group> -->
|
||||||
|
<span solt="footer">{{ $t('panel.drag_here') }}</span>
|
||||||
</draggable>
|
</draggable>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user