ant design vue使用中遇到的问题

目录

1、a-tree的defaultExpandAll设置不起作用

2、基于ant-design-vue中a-tree的搜索功能

3、a-upload实现手动上传

---

1、a-tree的defaultExpandAll设置不起作用

defaultExpandAll 仅在组件第一次渲染时有效，不仅仅tree组件，其它组件的defaultXXX值都是这个行为，
可以自行搜索受控组件/非受控组件的概念。如果你想异步获取数据后展开全部结点，可以使用非受控方式：

参考：https://blog.csdn.net/qq_42597536/article/details/93491750

2、基于ant-design-vue中a-tree的搜索功能

<a-input-search size="small" style="margin-bottom: 8px; width: 130px" placeholder="搜索" @change="onChange" />
<a-tree
    ref="tree"
     v-if="prolist.length"
        style="width: fit-content; background: #fff"
        :showLine="true"
        showIcon
        size="small"
        :selected-keys="selectedKeys"
        :tree-data="prolist"
        @select="onSelect"
        @expand="onExpand"
        :autoExpandParent="autoExpandParent"
        :expandedKeys="expandedKeys"
      >
     <img src="../../../assets/1.jpg" slot="inner" width="15px" />
</a-tree>

<script>
export default {
    data() {
        prolist: [],
        expandedKeys: [],
        searchValue: '',
        selectedKeys:[],
        backupsExpandedKeys: [],
        autoExpandParent: false,
    },
    methods: {
        onSelect(selectedKeys, info) {
            this.selectedKeys = selectedKeys
        },
        onExpand(expandedKeys) {
          //用户点击展开时，取消自动展开效果
          this.expandedKeys = expandedKeys
          this.autoExpandParent = false
        },
        //该递归主要用于获取key的父亲节点的key值
        getParentKey(key, tree) {
          let parentKey, temp
          //遍历同级节点
          for (let i = 0; i < tree.length; i++) {
            const node = tree[i]
            if (node.children) {
              //如果该节点的孩子中存在该key值，则该节点就是我们要找的父亲节点
              //如果不存在，继续遍历其子节点
              if (node.children.some((item) => item.key === key)) {
                parentKey = node.key
              } else if ((temp = this.getParentKey(key, node.children))) {
                //parentKey = this.getParentKey(key,node.children)
                //改进，避免二次遍历
                parentKey = temp
              }
            }
          }
          return parentKey
        },
        //获取该节点的所有祖先节点
        getAllParentKey(key, tree) {
          var parentKey
          if (key) {
            //获得父亲节点
            parentKey = this.getParentKey(key, tree)
            if (parentKey) {
              //如果父亲节点存在，判断是否已经存在于展开列表里，不存在就进行push
              if (!this.backupsExpandedKeys.some((item) => item === parentKey)) {
                this.backupsExpandedKeys.push(parentKey)
              }
              //继续向上查找祖先节点
              this.getAllParentKey(parentKey, tree)
            }
          }
        },
        onChange(e) {
          let vm = this
          //添加这行代码是为了只点击搜索才触发
          vm.searchValue = e.target.value
          //如果搜索值为空，则不展开任何项，expandedKeys置为空
          //如果搜索值不位空，则expandedKeys的值要为搜索值的父亲及其所有祖先
          if (vm.searchValue === '') {
            vm.expandedKeys = []
          } else {
            //首先将展开项与展开项副本置为空
            vm.expandedKeys = []
            vm.backupsExpandedKeys = []
            //获取所有存在searchValue的节点
            let candidateKeysList = vm.getkeyList(vm.searchValue, vm.prolist, [])
            //遍历满足条件的所有节点
            console.log(candidateKeysList)
            candidateKeysList.map((item) => {
              //获取每个节点的母亲节点
              var key = vm.getParentKey(item, vm.prolist)
              //当item是最高一级，父key为undefined，将不放入到数组中
              //如果母亲已存在于数组中，也不放入到数组中
              if (key && !vm.backupsExpandedKeys.some((item) => item === key))         vm.backupsExpandedKeys.push(key)
              })
            let length = this.backupsExpandedKeys.length
            for (let i = 0; i < length; i++) {
              vm.getAllParentKey(vm.backupsExpandedKeys[i], vm.prolist)
            }
            vm.expandedKeys = vm.backupsExpandedKeys.slice()
          }    
        },
    }
}
</script>

3、a-upload实现手动上传

<a-upload
     name="file"
     list-type="picture-card"
     class="avatar-uploader"
     :show-upload-list="false"
     :customRequest="uploadImage"
     :before-upload="beforeUpload"
      accept="image/jpeg,image/jpg,image/png"
  >
    <div class="add" v-if="imageUrl&&imageUrl.length">添加图片+</div>
    <img class="clear" v-else  @click.stop="delpic" src="@/assets/images/ljt.png" alt="" />
 </a-upload>
<script>
import { upload } from '@/api/adManage.js'
export default {
    data(){
        return {
            imageUrl:''
        }
    },
   methods: {
        // 图片自定义上传
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('你只能上传jpg或者png格式的图片!')
      }
      const isLt4M = file.size / 1024 / 1024 < 4
      if (!isLt4M) {
        this.$message.error('图片超过4M!')
      }
      return isJpgOrPng && isLt4M
    },
    uploadImage(file) {  //上传的接口
      let formData = new FormData()
      formData.append('file', file.file)
      upload(formData).then((res) => {
        if (res.success) {
          this.imageUrl = res.data.url
        }
      })
    },
   }
}
</script>

注：图片上传的请求头要设置为：multipart/form-data，否则会上传失败，springboot 报错：Current request is not a multipart request

请求设置如下：

export function upload(parameter) {
    return request({
        url: 'file/upload',
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data',  //成功的关键
        },
        data: parameter
    })
}