项目学习知识点_vue下拉树结构子id 父级id重复-CSDN博客

本文链接：https://blog.csdn.net/a15107071954/article/details/124439746

这篇博客涵盖了前端开发中的一些常见问题，包括上传文件、多行文字对齐、解决Vue.js表格闪烁问题、取消表格底部滚动条等。还涉及了ZTree的使用，如去除半勾选样式、异步加载子节点以及处理子节点ID与父节点ID相同的问题。此外，还讨论了输入框居中、滚动加载分页数据等交互设计。

摘要由CSDN通过智能技术生成

1、上传文件

html代码

<input type="file" id="upload">
<label for="upload" class="uploadlabel">
    <img v-if="form.avatar" :src="form.avatar" class="avatar" />
    <i v-else class="el-icon-plus uploadericon"></i>
</label>

css代码

/* 上传图片 */
#upload{
  position: absolute;
	clip: rect(0, 0, 0, 0);
}
.uploadlabel{
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 1px dashed #ddd;
}
.uploadericon{
  position: absolute;
  top: 37px;
  left: 37px;
  font-size: 26px;
  color: #ddd;
}
.register  .avatar {
    width: 100px;
    height: 100px;
    display: block;
}

2、多行文字对齐

// 表单多行文字对齐
.el-form-item__label{
    display: inline-block;
    width: 5em;
    text-align: justify;
    overflow: hidden;
    line-height: 32px;
    height: 32px;
}
.el-form-item__label::after{
    content:'';
    display: inline-block;
    width: 100%;
}

3、解决vue的table闪烁问题

<el-table :data="List1" :key="toggleIndex">


'queryForm.table':function(newV,oldV){
     this.toggleIndex = newV+3;
 }

给table绑定key值，key对应改变即可。

4、取消表格底部滚动条

/deep/.el-table__body-wrapper{
  overflow: hidden;
}// 取消表格底部滚动条

5、样式符号&

.bordered {
  &.float {
    float: left; 
  }
}

等同于

.bordered.float {
  float: left; 
}

6、ztree去掉半勾选样式

.checkbox_true_part,&.checkbox_true_part_focus,&.checkbox_false_part,&.checkbox_false_part_focus{
      background-position: -170px -100px !important;
}

7、ztree异步加载子节点

// url
    getUrl(treeId, treeNode) {
      if (treeNode == undefined) {
          return "/basicSetting/queryEmployeeAttribute";
      }
      return this.getAsyncTree(treeNode);
    },
    getAsyncTree(treeNode) {
      var checked = 0;
      if(treeNode.checked){
        checked = 1;
      }
      var param = "departId=" + treeNode.id + "&isCheck=" + checked;
      return "/basicSetting/queryEmployeeAttribute?" + param;
    },

async: {
          enable: true,
          type:'get',
          url: this.getUrl,
          otherParam: {},
          dataFilter: this.ajaxDataFilter
        },

// 过滤数据
    ajaxDataFilter(treeId, parentNode, responseData) {
      this.checkData = responseData.ret;
      responseData = responseData.obj;
      return responseData;
    },