【el】树状组件

一、方法

1、指定层级显示复选框并实现单选

需求：必须先选择二级文件夹，然后再点击上传按钮，实现添加子级
数据一二两级是固定的，表示文件夹，第三级是文件

子组件：

  //添加show-checkbox、 check-strictly
              <el-tree
                  ref="tree"
                  :data="Form.files"
                  default-expand-all
                  node-key="id"
                  :props="defaultProps"
                  show-checkbox
                  check-strictly
                >
                </el-tree>

<style lang="scss">
  .el-checkbox__input.is-disabled {
    display: none;
  }
</style>

注意：子组件的写的是tree的处理复选框为单选，使用css隐藏掉disabled的复选框
父组件给接口返回的数据添加disabled，需要显示复选框的层级不需要添加，其余都添加

父组件：

methods:{
  // 给附件的数组组件添加禁用
    getfiles(data) {
      // 一级
      data.forEach((i) => {
        this.$set(i, "disabled", true);
        if (i.children.length > 0) {
          // 二级
          i.children.forEach((j) => {
            if (j.children.length > 0) {
              // 三级
              j.children.forEach((ele) => {
                this.$set(ele, "disabled", true);
              });
            }
          });
        }
      });
    },
   // 获取数据
    GetFromData(i) {
      GetFromData({ dataid: i }).then((res) => {
        this.editForm = {};
        this.editForm = res.data;
        console.log(res, "获取表单数据");
        this.getfiles(res.data.files); //附件添加禁用
      });
    },
}

2、选中相应层级后，再上传文件

图片和接口返回的数据就是和第一个指定层级显示复选框，这里就不贴了，直接写代码

              <div>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action=""
                  :show-file-list="false"
                  :limit="1"
                  :http-request="http"
                >
                  <el-button
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click="before"
                    >选取文件</el-button
                  >
                </el-upload>
                <el-tree
                  ref="tree"
                  :data="Form.files"
                  default-expand-all
                  node-key="id"
                  :props="defaultProps"
                  show-checkbox
                  check-strictly
                  @node-click="nodeClick"
                  @check-change="handleNodeClick"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span v-if="data.path">
                      <el-button class="el-icon-edit" type="text" size="mini">
                      </el-button>
                    </span>
                  </span>
                </el-tree>
               </div>

data() {
    return {
      treeData: {}, //当前树状的数据
      defaultProps: { children: "children", label: "lable" },
      folderid: 0, //给添加新附件用的
    };
  },
methods: {
    // 附件添加新的
    handleNodeClick(data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([data]);
        this.folderid = data.id;
      }
    },
    before(e) {
      if (!this.folderid) {
        this.$mess.error("请选择所需上传文件夹");
        e.stopPropagation(); // 阻止事件冒泡到父元素
      }
    },
    async http(file) {
      var formData = new FormData();
      formData.append("files", file.file);
      const res = await UploadData(formData);
      // console.log(res, "123");
      if (res.code === 200) {
        this.$mess.success("上传成功"); //这个是封装的，无论调用多少次，都只显示一次
        if (res.data.length > 0) {
          this.treeData.path = res.data[0].FileUrl;
          this.treeData.lable = res.data[0].FileName;
        }
        const req = await AddBpmFile({
          id: "",
          dataid: this.Form.dataid,
          node_uuid: this.List.node_uuid,
          userid: this.userid,
          username: this.name,
          folderid: this.folderid,
          filename: this.treeData.lable,
          path: this.treeData.path,
        });
        if (req.code === 200) {
          this.$mess.success("添加附件成功");
          this.$emit("GetFromData", this.Form.dataid);
        }
      }
    },
 },

<style lang="scss">
  .el-checkbox__input.is-disabled {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

二、样式

1. 树状自定义图标

  //图标取消旋转
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  // 一级
  .el-tree .el-icon-caret-right:before {
    background: url('../../assets/404_images/404.png') no-repeat 0 3px;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
  }
  // 二级
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url('../../assets/404_images/404.png') no-repeat 0 3px;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
  }
  // 三级
  // .el-tree-node__expand-icon.is-leaf::before {
  //   display: none;
  // }