[el] tree component

1. Method

1. Specify the level display check box and realize single selection

Requirements: You must first select the second-level folder, and then click the upload button to add sub-levels. The first and second levels
of data are fixed, indicating folders, and the third level is files

Subassembly:

  //添加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>

Note: The child component writes that the tree handles the check box as a single selection, and uses css to hide the disabled check box.
The parent component adds disabled to the data returned by the interface. The level that needs to display the check box does not need to be added, and the rest are all Add to

parent component:

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. After selecting the corresponding level, upload the file

The data returned by the picture and the interface is the first specified level display checkbox, so I won’t paste it here, just write the code directly

              <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>

Two, style

1. Tree Custom Icons

  //图标取消旋转
  .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;
  // }