展示代码:方便理解,代码上附上注释。
<div class="block">
<el-tree
//展示的数据
:data="treedata"
//展示数据的自定义格式,可不写,不写就是默认按官方文档的格式
:props="defaultProps"
//节点是否可被选择,默认为false,即一开始都没被勾选
show-checkbox
//自己数据的唯一标识符
node-key="primaryId"
//默认被勾选的数据,一个(node-key)primaryId数组[1,4,6..],不理解看下后面的数据格式就明白了
:default-checked-keys="tickdata"
//是否默认展开所有节点,默认为false,即一开始节点都没展开
default-expand-all
//点开该节点就展示该节点下的所有子节点
:expand-on-click-node="false"
ref="tree">
</el-tree>
</div>
无注释,方便复制粘贴。
<div class="block">
<el-tree
:data="treedata"
:props="defaultProps"
show-checkbox
node-key="primaryId"
:default-checked-keys="tickdata"
default-expand-all
:expand-on-click-node="false"
ref="tree">
</el-tree>
</div>
JS代码:
export default {
data() {
return {
//展示的所有数据
treedata: [],
//被勾选的primaryId数组
tickdata: [],
defaultProps: {
children: 'children',
label: 'label',
primaryId:'primaryId'
},
},
userId: ''
},
created() {
this.getTreeData()
this.getTickData()
},
methods: {
//从后端获取treedata的方法,根据自己需求写
getTreeData() {
axios.get(`${baseURL}/tree/getTreeData?userId=0`).then(({
data
}) => {
this.treedata = data
})
},
//从后端获取tickdata的方法,根据自己需求写
getTickData() {
axios.get(`${baseURL}/tree/getTickData?userId=`+this.userId).then(({
data
}) => {
this.treedata = data
})
},
}
}