elementUI的el-tree的赋值回显问题

杨羊羊_01

已于 2022-03-17 13:10:56 修改

阅读量2.7k

点赞数 2

分类专栏： vue element 文章标签： elementui javascript vue.js

于 2022-03-17 11:59:27 首次发布

本文链接：https://blog.csdn.net/m0_63872974/article/details/123546853

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

element

6 篇文章 0 订阅

订阅专栏

elementUI的el-tree

回显方式一：default-checked-keys

 <el-tree
        ref="treeRef"
        :data="templateList"
        default-expand-all
        node-key="templateId"
        highlight-current
        :props="defaultProps"
        show-checkbox
        :default-checked-keys="treeDataSelect"
        :expand-on-click-node="false"
        @check="checkChange"
      >
      </el-tree>

数据请求：

 this.axios
        .get(this.loadTemplateInfoUrl, {
          params: { this.axios
        .get(this.loadTemplateInfoUrl, {
          params: {
            userId: this.relationId,
          },
        })
        .then(({ data }: { data: any }) => {
          if (data.errorcode == 0) {
            this.templateList = data.data.templateGroupList;
            this.templateList.map((item: any) => {
              item.templateName = item.sourceName;
              item.templateId = item.souceIndex;
            });
            let dataId = [] as any;
            this.templateList.map((element: any) => {
              element.customTemplateInfoList.map((item: any) => {
                if (item.selStatus == 1) {
                  dataId.push(item.templateId);
                }
              });
            });
            this.treeDataSelect = dataId;
          } else {
            ElMessage.warning(data.message);
          }
        });
            userId: this.relationId,
          },
        })
        .then(({ data }: { data: any }) => {
          if (data.errorcode == 0) {
            this.templateList = data.data.templateGroupList;
            this.templateList.map((item: any) => {
              item.templateName = item.sourceName;
              item.templateId = item.souceIndex;
            });
            let dataId = [] as any;
            this.templateList.map((element: any) => {
              element.customTemplateInfoList.map((item: any) => {
                if (item.selStatus == 1) {
                  dataId.push(item.templateId);
                }
              });
            });
            this.treeDataSelect = dataId;
            setTimeout(() => {
              dataId.forEach((item: any) => {
                (this.$refs.treeRef as any).setChecked(item, true, false);
              });
            }, 200);
          } else {
            ElMessage.warning(data.message);
          }
        });

回显方式二：this.$refs.treeRef .setCheckedKeys();

 this.axios
        .get(this.loadTemplateInfoUrl, {
          params: {
            userId: this.relationId,
          },
        })
        .then(({ data }: { data: any }) => {
          if (data.errorcode == 0) {
            this.templateList = data.data.templateGroupList;
            this.templateList.map((item: any) => {
              item.templateName = item.sourceName;
              item.templateId = item.souceIndex;
            });
            let dataId = [] as any;
            this.templateList.map((element: any) => {
              element.customTemplateInfoList.map((item: any) => {
                if (item.selStatus == 1) {
                  dataId.push(item.templateId);
                }
              });
            });
            setTimeout(() => {
              dataId.forEach((item: any) => {
                (this.$refs.treeRef as any).setChecked(item, true, false);
              });
            }, 200);
          } else {
            ElMessage.warning(data.message);
          }
        });