element tree的数据展示和回显

element树的使用相对于layui的树和jquery的ztree树更加简单和容易上手，将后台返回参数赋值给data，就可以进行简单的回显，但是element的树结构是有格式要求的，因此在这里Element提供了props来允许我们指定参数的格式进行显示，通过default-checked-keys我们可以设置标识唯一值进行回显数据（前提是得设置node-key="id"）

我给出试例代码：

<template>
  <el-tree
  :data="funcData"
  show-checkbox
  default-expand-all
  :check-strictly="true"
  :default-checked-keys="checkedKeys"
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>
</template>

<script>
export default {
    props:["funcData","checkedKeys"],
    data(){
        return{
            data: [],
            defaultProps: {//指定参数格式回显数据
                children: 'childList',
                label: 'name'
            },
        }
    },
    methods:{
        getCheckedNodes() {//获取选中节点
            let t = this.$refs.tree.getCheckedNodes();
            let data=[];
            t.forEach((item)=>{
               data.push(item.id)
            })
            data = data.toString();
            return data;
        },
        setCheckedKeys() {
            debugger;
            this.$refs.tree.setCheckedKeys([3]);
        },
    }
}
</script>

<style scoped>

</style>