github/magic-boot
github/magic-boot
4
0
Fork 0
mirror of https://gitee.com/ssssssss-team/magic-boot.git synced 2025-04-28 14:04:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

pd-tree treeTable.js 优化

Browse Source
This commit is contained in:
吕金泽 2022-01-15 00:42:00 +08:00
parent 2041a7ef4c
commit dec414894d
2 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
magic-boot-ui/src/components/Psyduck/pd-tree.vue
View File

@ -1,11 +1,16 @@
<template>
<div>
<el-button v-if="expand" type="primary" size="mini" icon="el-icon-sort" plain @click="doExpand">展开/折叠</el-button>
<el-button v-if="checked" type="primary" size="mini" icon="el-icon-check" plain @click="() => { treeAllChecked = !treeAllChecked; checkedAll(treeData, treeAllChecked) }">全选/全不选</el-button>
<div>
<el-button v-if="expand" type="primary" size="mini" icon="el-icon-sort" plain @click="doExpand">展开/折叠</el-button>
<el-button v-if="checked" type="primary" size="mini" icon="el-icon-check" plain @click="() => { treeAllChecked = !treeAllChecked; checkedAll(searchData, treeAllChecked) }">全选/全不选</el-button>
</div>
<div style="margin: 5px 0px;" v-if="search">
<el-input v-model="searchValue" @input="searchTree" style="width: 90%" />
</div>
<el-tree
v-if="refreshTree"
ref="tree"
:data="treeData"
:data="searchData"
v-bind="el"
node-key="id"
:default-expand-all="defaultExpandAll"
@ -49,12 +54,16 @@ export default {
checked: {
type: Boolean,
default: true
},
search: {
type: Boolean,
default: false
}
},
watch: {
async selectValues() {
await this.loadTreeData()
this.checkedAll(this.treeData, false)
this.checkedAll(this.searchData, false)
var values = this.selectValues.split(',');
for(var i in values){
this.$refs.tree.setChecked(values[i], true, false)
@ -64,19 +73,28 @@ export default {
data() {
return {
treeData: [],
searchData: [],
defaultProps: {
children: 'children',
label: 'name'
},
defaultExpandAll: true,
refreshTree: true,
treeAllChecked: false
treeAllChecked: false,
searchValue: ''
}
},
async created() {
await this.loadTreeData()
},
methods: {
searchTree() {
if(this.searchValue){
this.searchData = this.$treeTable.recursionSearch(['name'], this.$common.copyNew(this.treeData), this.searchValue, false)
}else{
this.searchData = this.treeData
}
},
doExpand() {
this.refreshTree = false
this.defaultExpandAll = !this.defaultExpandAll
@ -86,6 +104,7 @@ export default {
if(this.treeData.length == 0){
await this.$get(this.url, this.params).then((res) => {
this.treeData = res.data.list
this.searchData = this.treeData
})
}
},
@ -99,6 +118,7 @@ export default {
selectMenus.push(checkedNodes[i].id)
}
this.$emit('update:select-values', selectMenus.join(','))
this.$emit('check-change', selectMenus.join(','))
},
nodeClick(param1, param2, param3){
this.$emit('node-click', param1, param2, param3)

14
magic-boot-ui/src/scripts/treeTable.js
View File

@ -61,27 +61,29 @@ treeTable.deleteEmptyChildren = (children) => {
}
}
treeTable.recursionSearch = (fields, data, text) => {
treeTable.recursionSearch = (fields, data, text, html) => {
var searchData = []
for(var i in data){
var treeNode = data[i]
var children = treeNode.children
if(children && children.length > 0){
var childrenSearch = treeTable.recursionSearch(fields, children, text)
var childrenSearch = treeTable.recursionSearch(fields, children, text, html)
treeNode.children = childrenSearch && childrenSearch.length > 0 ? childrenSearch : treeNode.children
treeTable.treeNodeReplace(fields, searchData, treeNode, text, childrenSearch)
treeTable.treeNodeReplace(fields, searchData, treeNode, text, childrenSearch, html)
}else{
treeTable.treeNodeReplace(fields, searchData, treeNode, text)
treeTable.treeNodeReplace(fields, searchData, treeNode, text, null, html)
}
}
return searchData
}
treeTable.treeNodeReplace = (fields, searchData, treeNode, text, childrenSearch) => {
treeTable.treeNodeReplace = (fields, searchData, treeNode, text, childrenSearch, html) => {
var exist = false
fields.forEach((f) => {
if(treeNode[f] && treeNode[f].indexOf(text) != -1){
treeNode[f] = treeNode[f].replace(text, `<font color="#FAA353">${text}</font>`)
if(html){
treeNode[f] = treeNode[f].replace(text, `<font color="#FAA353">${text}</font>`)
}
exist = true
}
})