Solve the events selected by default in the ElementUi tree structure (the perfect solution)

Recently, I made a background management system, using ElementUi's el-tree component, and with a selection effect. When modifying the data, the original selected data needs to be rendered into the tree structure, data and default-checked- The data of the keys is all the data obtained from the background, so when the modification operation is performed, the selected effect is not reflected as expected. Later, I found out that before rendering the el-tree, I had to get the default- The selected data of checked-keys, otherwise the default selected state will not be rendered;

        <el-tree
                    v-if="isShowTree"
                    :data="zTree"
                    :props="defaultProps"
                    :default-checked-keys="defaultTree"
                    node-key="cDptCde"
                    ref="tree"
                    show-checkbox
                    @check-change="handledeptNodeClick"
                    class="div-border box-card">
            </el-tree>

So, I used an isShowTree state. When I got the data details and got the default-checked-keys, I set isShowTree=true. If you use the props attribute, you must wait until the data data is obtained. Render el-tree, that is to say, you can set isShowTree only when you get data data &&default-checked-keys data at the same time. Then you can perfectly render the tree structure with selected effect. If there is a problem that can’t be solved, you can try it. test! use

        computed: {
           /*从后台获取递归数据*/
            zTree() {
                return this.$store.getters.zTree.tree
            },
            /*是否展示机构数*/
            isShowTree(){
               // this.zTree.length --->如果leng>0,代表已获取到data的数据
               // this.isGetDetail--->如果isGetDetail为true，则说明已经获取到default-checked-keys的数据
                return this.zTree.length&&this.isGetDetail
            }