iView树型图Tree增加编辑、新建、删除以及虚线样式

前言

今天做数仓需要个树形图，想着本来UI用的就是iView，不想再引入别的插件了，但是iView的Tree组件和产品要求的有些不一样。

要求：要求前面要用加减号图标，不要箭头图标，要有同级虚线连接，需要可编辑、可添加、可删除节点；

但是Iview貌似没有现成的配置，只有个添加、删除大致的配置，如图（一）；
因此在参考几篇的帖子之后，决定用iView Tree强大的 render 改造一番；最终效果图 如图（二）

代码部分

<template>
  <div class="v-tree"> 
    <Tree :data="treeList" :render="renderContent" ></Tree>
  </div>
</template>
<script>
// import service from 'libs/service/api'
import { cloneDeep } from 'lodash-es'
export default {
  name: 'VTree',
  props: {
    name: String,
    bdId: [String, Number] // 数据库Id
  },
  data() {
    return {
      editState: false, // 编辑状态
      treeList: [
      {
        title: '深圳分公司',
        expand: true,
        // 单独给某个节点设置render,此render会优先Tree组件中的render(此组件可删除，只是为了展示一下，没有实际用处)
        render: (h, { root, node, data }) => { 
            return h('span', {  
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                  h('Icon', {
                      props: {
                        type: 'ios-folder'
                      },
                      style: {
                        marginRight: '8px',  
                      }
                  }),
                  h( "span" , data.title)
              ]), 
            ]);
        },
        children: [
            {
              title: '父-子',
              expand: true, 
              children: [
                  {
                    title: '子',
                    expand: true
                  },
                  {
                    title: '子2',
                    expand: true
                  }
              ]
            } 
        ]
      },
      {
        title: '深圳分公司',
        expand: true,
          children: [
            {
              title: '父-子',
              expand: true, 
              children: [
                {
                  title: '子',
                  expand: true
                },
                {
                  title: '子2',
                  expand: true
                }
              ]
            } 
          ]
        }
      ],
      buttonProps: {
        type: 'default',
        size: 'small',
      },
      // 输入框要修改的内容
      inputContent: '',
      // 修改前的TreeNode名称
      oldName: ''
    }
  },
  mounted() {
    // this.getTreeList()
  },
  methods: {
    // 树渲染逻辑
    renderContent (h, { root, node, data }) { 
      return h('span', {
        class: 'common-wrap',
        on:{
          click:() => {
            // 点击Tree节点触发
            if (!data.editState) {
              this.handleClickTreeNode(root, data, node)
            }
          }
        }
      }, [  
        h('span', [
          // 文件前面的文件夹图标
          h('Icon', {
            props: {
              type: `${data.children === undefined || data.children.length === 0 ? 'md-document' :'ios-folder'}`
            },
            style: {
              marginRight: '8px', 
            }
          }),
          h(`${ data.editState ? '' : 'span'}`, data.title),
          h(`${ data.editState ? 'input' : ''}`, 
            {
              class: 'edit-input',
              attrs:{
                value:`${ data.editState ? data.title : ''}`, 
                autofocus: 'true'
              },  
              style: {     
                // cursor: 'auto' ,
                // borderRadius: '3px',
                // border: '1px solid #e5e5e5',
                // color: '#515a6e'
              },
              on:{
                change: (event) => { 
                  this.inputContent = event.target.value 
                }
              }
            }
          )
        ]), 
        // 增删改按钮部分
        h(`${ data.editState ? '' : 'span'}`,
          {
            class: 'btnNone'
          },
          [
            // 操作按钮部分 
            // 编辑按钮
            h('Button', {
              props: {
                ...this.buttonProps,
                icon: 'md-color-filter'
              },
              on: {
                click: () => { this.editTree(data) }
              }
            }),
            // 添加按钮
            h('Button', {
              props: {
                ...this.buttonProps,
                icon: 'md-add'
              },
              on: {
                click: () => { this.append(data) }
              }
            }),
            // 删除按钮
            h('Button', {
              props: {
                ...this.buttonProps,
                icon: 'md-remove'
              },
              on: {
                click: () => { this.remove(root, node, data) }
              }
            })
          ]
        ),    
        // 确认/取消修改部分
        h(`${ data.editState ? 'span' : ''}`,
          { 
            style: { 
              marginLeft: '.5rem'
            }
          },
          [  
            // 确认按钮
            h('Button', {
              props: {
                ...this.buttonProps,
                icon: 'md-checkmark' 
              },
              style: {
                border: 0,
                background: 'rgba(0,0,0,0)',
                fontSize: '16px',
                outline: 'none'
              },
              on: {
                click: (event) => {  
                  this.confirmTheChange(data) 
                }
              }
            }),
            // 取消按钮
            h('Button', {
              props: {
                ...this.buttonProps,
                icon: 'md-close'
              },
              style: {
                border: '0',
                background: 'rgba(0,0,0,0)',
                fontSize: '16px',
                outline: 'none'
              },
              on: {
                click: () => { this.cancelChange(data) }
              }
            }) 
          ]
        ) 
      ])
    },
    /**
     * @description: 获取树列表(这部分可以换成自己的)
     * @param {*}
     * @return {*}
     */    
    async getTreeList() {
      let res = await service.getCategoryTreeList({
        name: this.name,
        id: this.bdId
      })
      if (res.data) {
        this.treeList = [...res.data]
        // 路由参数带有id，则置为选中状态
        if (this.bdId) {
          this.filterTableMater(this.bdId, this.treeList)
        }
      }
    },
    // 控制Tree当前状态函数
    setStates(data){
      let editState=data.editState
      if (editState) {
        this.$set(data, 'editState', false)
      } else {
        this.$set(data, 'editState', true)
      }  
    },
    // Tree修改按钮
    editTree(data){
      event.stopPropagation()  
      this.inputContent=data.title 
      this.oldName=data.title
      this.setStates(data)  
    },
    // 添加按钮
    append (data) {
      event.stopPropagation()
      const children = data.children || []
      children.push({
        title: '新建节点',
        expand: true
      })
      this.$set(data, 'children', children)
    },
    // 删除按钮
    remove (root, node, data) {
      event.stopPropagation()
      this.$Modal.confirm({
        title: '提示',
        content: `您确定删除 “${data.title}” 吗？`,
        onOk: () => {
          const parentKey = root.find(el => el === node).parent
          const parent = root.find(el => el.nodeKey === parentKey).node
          const index = parent.children.indexOf(data)
          parent.children.splice(index, 1)
          this.$Message.info('删除成功')
        },
        onCancel: () => {
          this.$Message.info('取消')
        }
      })
    }, 
    // 确认修改树节点
    confirmTheChange(data) {   
      if (!this.inputContent) {
        this.$Notice.warning({
          title: '当前输入有误', 
        })
      } else { 
        if(this.oldName !== this.inputContent){  
          this.$Modal.confirm({
            title: '提示',
            content: `您确定将  “${this.oldName}”  重命名为 “ ${this.inputContent} ” 吗？`,
            onOk: () => {
              data.title=this.inputContent 
              this.$Message.info('修改成功')
            },
            onCancel: () => {
              this.$Message.info('取消')
            }
          })
          this.setStates(data)
        } else{
          this.setStates(data)
        }
      }
    },
    // 取消修改树节点
    cancelChange(data) { 
      this.$Notice.info({
        title: '取消修改',
      })
      this.setStates(data)
    },
    // 点击Tree节点触发
    handleClickTreeNode(root, data, node) { 
      if (this.bdId) {
      	// 这里是因为 filterTableMater的时候this.treeList不是响应式的，倒是选中之后再次点击别的不去除样式
        this.treeList = cloneDeep(this.treeList) 
      }
      this.$emit('handleTreeNode',node) // 触发父级组件拉去新列表
    },
    // js 递归遍历查找对象数组的某一个属性
    filterTableMater(code, arr) {
      for (const item of arr) {
        if (item.id === code) {
          item.selected = true
        }
        if (item.children && item.children.length) {
          this.filterTableMater(code, item.children)
        }
      }
    }
  }
}
</script>

// 大部分改写都在样式这里，如果有必要请仔细看一下
<style lang="less">
// 编辑部分
.btnNone {
  display: none;
  margin-left: 15px;
  button {
    margin-right: 8px;
    width: 24px;
    line-height: 0;
    height: 24px;
  }
}
.common-wrap {
  display: inline-block;
  line-height: 25px;
  width: 100%;
  cursor: pointer;
  span:not(.btnNone) {
    display: inline-block;
  }
  .edit-input {
    width: 90px;
    cursor: auto;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    color: #515a6e;
    padding-left: 10px;
    outline: none;
  }
  .edit-input:focus {
    border: 1px solid #2d8cf0 !important;
  }
}
.common-wrap:hover .btnNone {
  display: inline-block;
}
.common-wrap:hover {
  color: #275cd4;
}

// 换箭头到加号
.ivu-tree ul li {
  list-style: none;
  padding: 0;
  white-space: nowrap;
  outline: none;
}
.ivu-tree .ivu-tree-arrow {
  width: 15px;
}
.ivu-tree .ivu-icon { // 禁止旋转
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.ivu-tree .ivu-icon-ios-arrow-forward::before { // 改变tree默认的三角箭头
  content: "\F32F"; // 采用ui库中自带的icon图标
  width: 15px;
  height: 15px;
  display: block;
}
.ivu-tree .ivu-tree-arrow-open .ivu-icon-ios-arrow-forward::before { // 改变tree默认的三角箭头
  content: "\F417"; // 采用ui库中自带的icon图标
  display: block;
  width: 15px;
  height: 15px;
}
// 虚线
.ivu-tree {
  .ivu-tree-children {
    position: relative;
    // padding-left: 16px; // 缩进量
  }
  .ivu-tree-children::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: 7px;
    top: -12px;
    border-width: 1px;
    border-left: 1px dashed #ddd;
  }
  // 当前层最后一个节点的竖线高度固定
  .ivu-tree-children:last-child::before {
    height: 20px; // 可以自己调节到合适数值
  }
  // 横线
  .ivu-tree-children::after {
    content: "";
    width: 11px;
    height: 20px;
    position: absolute;
    left: 9px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #ddd;
  }
  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .ivu-tree-children::after {
    border-top: none;
  }
  & > .ivu-tree-children::before {
    height: 100%;
    width: 1px;
    left: 7px;
    top: 13px;
    border-left: 1px dashed #ddd;
  }
  & > .ivu-tree-children:last-of-type::before {
    border-left: none;
  }
}
</style>

到这里就基本完成了，希望对有这部分需求的盆友有用处，加油💪！！！