el-tree树添加向下移动按钮，前端界面调整顺序

dy1717

于 2024-07-24 14:30:34 发布

阅读量26

点赞数 1

分类专栏：工作遇到的bug 文章标签：前端

本文链接：https://blog.csdn.net/dy1717/article/details/140661814

版权

工作遇到的bug 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

需求：树上添加向下按钮，再不调用接口的情况下，调整树的顺序结构

遇到的问题：第一次点击更新的，数据和视图是调整好的，再次点击页面调整顺序，只有数据被调整了，视图没有发生改变。

     <el-tree
            ref="tree"
            :data="treeData"
            highlight-current
            node-key="id"
            :props="props"
            :default-expanded-keys="showList"
            @node-click="clicktree"
          >
            <span slot-scope="{node, data }" class="custom-tree-node">
              <img v-if="data.seq_img" :src="hanleImgShow(data?.seq_img)" width="20" height="20">
              <span style="display:inline-block;padding-left:5px;">{{ data?.seq_name_chn }}</span>
              <el-button v-if="data.seq_img" type="text" icon="el-icon-arrow-down" @click="moveDown(node,data,data?.seq_num)" />
            </span>
          </el-tree>

    moveDown(node, data, num) {
      const seqNum = Number(num)
      const childrenLength = node.parent.data.children.length
      const childrenList = node?.parent?.data?.children
      //     seqNum  这个值去判断
      if (childrenLength == seqNum) {
        return this.$message.warning('不可以下移')
      }

      const treeList = this.treeCreatedData // 存放数据的, 这个里面的children是存放的序数据
      const targetIndex = childrenList.findIndex(item => item.seq_num == num)
      if (targetIndex !== -1) {
        this.moveItemAndUpdateSeqNum(childrenList, targetIndex) // 将第三项移动到第一位
      }
    },
    moveItemAndUpdateSeqNum(list, index) {
      if (index < list.length - 1 && index >= 0) {
        const temp = list[index]
        list[index] = list[index + 1]
        list[index + 1 ] = temp

        this.$nextTick(() => {
          for (let i = index; i <= index + 1; i++) {
            list[i].seq_num = (i + 1).toString()
          }
          console.log(list, 'list382')
          this.treeCreatedData[0].children[0].children = list
          this.treeData = this.treeCreatedData
          this.$forceUpdate() 
        })
      }
    },

这样写，只会更新第一次的视图，后续点击视图没有发生改变；最后找到的方法是使用ref找树的方法去修改。

 moveItemAndUpdateSeqNum(list, index) {
      if (index < list.length - 1 && index >= 0) {
        const temp = list[index]
        list[index] = list[index + 1]
        list[index + 1 ] = temp

        this.$nextTick(() => {
          for (let i = index; i <= index + 1; i++) {
            list[i].seq_num = (i + 1).toString()
          }
          console.log(list, 'list382')
          this.treeCreatedData[0].children[0].children = list
          this.treeData = this.treeCreatedData
          this.$refs.tree.root.setData(this.treeData) //使用这个 去更新树节点的数据
        })
      }
    },