VUE饿了么树形控件添加增删改功能的示例代码(2)

日期：2020-05-11 栏目：程序人生 浏览：次

3.tree_render Component基本

渲染组件：

<template>
  <span class="tree-expand">
    <span class="tree-label">
      <span>{{DATA.name}}</span>
    </span>
    <span class="tree-btn">
      <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i>
      <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i>
      <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i>
    </span>
  </span>
</template>

添加好几个按钮（element-ui自带icon：地址）对应的方法：

export default{
  props: ['NODE', 'DATA', 'STORE'],
  methods: {
   nodeAdd(s,d,n){//新增
    this.$emit('nodeAdd',s,d,n)
   },
   nodeEdit(s,d,n){//编辑
    this.$emit('nodeEdit',s,d,n)
   },
   nodeDel(s,d,n){//删除
    this.$emit('nodeDel',s,d,n)
   }
  }
}

4.改

我们用isEdit来切换input和span的显示状态，首先加个input：

<!-- tree_render component -->
<template>
  <span class="tree-expand">
    <span class="tree-label" v-if="DATA.isEdit">
      <el-input class="edit" size="mini"
      :ref="'treeInput'+DATA.id"
      v-model="DATA.name"></el-input>
    </span>
    <template v-else>
      <span class="tree-label">
        <span>{{DATA.name}}</span>
      </span>
      <span class="tree-btn" v-show="!DATA.isEdit">
        <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i>
        <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i>
        <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i>
      </span>
    </template>
  </span>
</template>

编辑的时候按钮同时消失，那么什么时候编辑完成呢？

  • 编辑完按enter键=》监听input的enter输入
  • 点击其他节点=》input失焦-blur=》编辑时自动聚焦-focus
  • 点击当前节点范围

当以上三点发生一项，节点对应的data都要isEdit = false;

1、enter键

<!-- tree_render component -->
<el-input @keyup.enter.native="nodeEditPass(STORE,DATA,NODE)"></el-input>

添加方法：

//tree_render component
methods: {
  nodeEditPass(s,d,n){
    d.isEdit = false;
  }
}

2、focus or blur

<!-- tree_render component -->
<el-input @blur="nodeEditPass(STORE,DATA,NODE)"></el-input>

后来发现第一次编辑时能让input聚焦，点击第二个input就不起作用了，加了autofocus属性也同样如此。所以我们要在点击编辑icon的时候，用原生的input autofocus。