element解决树结构默认选中踩坑记录
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element解决树结构默认选中踩坑记录
碰到的一个离奇问题 tree这个组件子数据明明没有全部选中结果树结构的子节点,却显示全部选中了节点,后来发现是因为父节点的id出现了就默认子节点全部选中,所以就不能再用default-checked-keys这个属性。改为默认提供的原型链setCheckedKeys方法。
下面晒方法
引用的组件
<el-tree :data="data"
show-checkbox
:node-key="node_key"
ref="menuListTree"
:default-expanded-keys="defaultExpandKeys"
:default-checked-keys="defaultCheckKeys"
:props="defaultProps">
</el-tree>
外部方法
import { getAllNode, getAllKey } from '@/utils/tree.js'
export const getAllNode = (arr, name, childName) => {
let str
const arrs = []
if (!arr) {
return
}
if (!name) {
name = 'id'
}
if (!childName) {
childName = 'children'
}
const getChild = (arr) => {
for (let i = 0; i < arr.length; i++) {
arrs.push(arr[i][name])
if (arr[i][childName] && arr[i][childName].length > 0) {
getChild(arr[i].children)
}
}
str = arrs
return str
}
return getChild(arr)
}
export const getAllKey = (arr, name, childName) => {
let str
const arrs = []
var ceshi = []
if (!arr) {
return
}
if (!name) {
name = 'id'
}
if (!childName) {
childName = 'children'
}
const getChild = (arr) => {
for (let i = 0; i < arr.length; i++) {
arrs.push(arr[i][name])
if (arr[i][childName] && arr[i][childName].length > 0) {
getChild(arr[i].children)
} else {
if (arr[i].status === '1') {
ceshi.push(arr[i].id)
} else {
console.log('sdfasdf')
}
}
}
str = ceshi
return str
}
return getChild(arr)
}
js部分代码
fnGetbumen (id) {
this.loading = true
this.$http({
url: this.$http.adornUrl('/api/AdminUser/showJurisdiction'),
method: 'post',
data: this.$http.adornData({
group_id: id
})
}).then(({ data }) => {
this.loading = false
if (data.code === '1') {
this.data = data.data
this.defaultExpandKeys = getAllNode(data.data, 'id', 'children')
// this.defaultCheckKeys = data.xuan_str.split(',')
this.$refs.menuListTree.setCheckedKeys(getAllKey(data.data, 'id', 'children'), true) //重点是这句话,将所需要的数据转换成想要的数据
} else {
this.$message({
type: 'error',
message: data.msg
})
}
})
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)