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>