Vue строит пользовательское дерево на основе элемента

внешний интерфейс Element Vue.js

иллюстрировать

При выполнении проекта для построения дерева таблиц используется пользовательский элемент управления tree.Я искал на github и не нашел подходящих (красивых), которые можно было бы использовать напрямую.Нашел, когда смотрел описание компонента Element.Управление деревомВы можете использовать рендеринг для настройки стиля узла, поэтому на его основе он инкапсулирует компонент дерева, который можно добавлять, удалять и изменять, а теперь делится своим использованием и реализацией.

Демонстрация управления

контроль использования

резюме

  • Вторичная инкапсуляция на основе управления деревом element-ui
  • Предоставлено редактирование, удаление интерфейса узла
  • Предоставьте следующий хук, вы можете использовать next(false) для отката операции при сбое бизнес-обработки.
  • См. исходный код элемента управленияgithub

Документация

  • props
Атрибуты иллюстрировать Типы
value Исходные данные, двусторонняя привязка с использованием v-модели Array
  • events
название события иллюстрировать параметр
SaveEdit Сохранение события после нажатия кнопки «Изменить» или «Добавить узел дерева» (данные родительского узла, данные текущего узла, следующие)
DelNode удалить событие узла (данные родительского узла, данные текущего узла, следующие)
NodeClick Событие щелчка узла (текущие данные узла)
  • Описание исходных данных
Атрибуты иллюстрировать
value Уникальный идентификатор узла дерева
label Отображаемое имя узла дерева
status (1: Состояние редактирования) (0: State Display) (-1 неотедентное состояние)
children данные дочернего узла
  • пример вызова
 <m-tree
    v-model="tableTree"
    @SaveEdit="SaveEdit"
    @DelNode="DelNode"
    @NodeClick="handleNodeClick"></m-tree>

SaveEdit(parentNode,data,next){
    var param = {
      parentNode:parentNode,
      node:data
    }
    this.$http.post(URL,param).then((response) => {
      if(response.status == 200){
        next(true,response.body.data.nodeId)
      }else{
        next(false)
      }
    })
}

Метод реализации

  • Шаблон для создания дочерних узлов
    <span class="span_item">
  <span @click="Expanded">
    <Input v-if="node.status == 1" style="width: 100px;" v-model="node.label" size="small" ></Input>
    <Icon  v-if="node.status == 0" type="asterisk"></Icon>
    <Icon v-if="node.status == -1" type="ios-keypad-outline"></Icon>
    <span v-if="node.status != 1">{{node.label}}</span>
  </span>
  <span v-if="node.status == 1">
    <Button  style="margin-left: 8px;" size="small" type="success" icon="checkmark-circled" @click="SaveEdit">确认</Button>
    <Button style="margin-left: 8px;" size="small" type="ghost" icon="checkmark-circled" @click="CancelEdit">取消</Button>
  </span>
  <span class="span_icon">
     <Icon v-if="node.status == 0" style="margin-left: 8px" color="gray" type="edit" size="16" @click.native="OpenEdit"></Icon>
     <Icon v-if="node.status == 0" style="margin-left: 8px" type="plus-round" color="gray" size="16" @click.native="Append"></Icon>
     <Icon v-if="node.status == 0&&node.children.length < 1" style="margin-left: 8px" type="ios-trash" color="red" size="18" @click.native="Delete"></Icon>
  </span>
</span>
  • Дочерние узлы уведомляют о событиях родительского узла через $emit
    SaveEdit(){
  //保存节点事件
  this.$emit('SaveEdit',this.nodeData)
},
  • Основная реализация родительского узла, используйте функцию renderContent для загрузки шаблона дочернего узла и сохранения бизнес-параметров в runParam при нажатии узла сохранения для отката данных в случае сбоя бизнес-операции (сбой сетевого запроса, исключение сервера и т. д.). .).
      <el-tree
    class="filter-tree"
    style="overflow:auto;"
    :data="treeData"
    :filter-node-method="filterNode"
    @node-click="handleNodeClick"
    ref="tree"
    node-key="value"
    :expand-on-click-node="false"
    :render-content="renderContent"
    default-expand-all>
  </el-tree>
  //子节点模板
  renderContent(h, { node, data, store }) {
      return h(TreeItem,{
        props:{
          value:data,
          treeNode:node
        },
        on:{
          input:(node)=>{
            data = node
          },
          Append: () => {
            node.expanded = true
            data.children.push({ value: this.$utilHelper.generateUUID(), label: '请输入模块名称', children: [],status:1,isAdd:true })
          },
          //保存节点
          SaveEdit:(nodeData)=> {
            //递归查找父节点
            var parentNode = this.$utilHelper.getNode(this.treeData,data.value).parentNode
            this.runParam.parentNode = parentNode
            this.runParam.data = data
            this.runParam.nodeData = nodeData
            this.$emit('SaveEdit',parentNode,data,this.CanSaveNext)
          }
        }
      })
    }
  • Хук результата операции, если false передается следующей функции, определяется, что операция не удалась, и параметры в runParam используются для отката, и операция редактирования и сохранения этого узла будет недействительной.
        CanSaveNext(isNext,nodeId){
      let parentNode = this.runParam.parentNode
      let nodeData = this.runParam.nodeData
      let data = this.runParam.data
      if(isNext){
        parentNode.children.forEach((v,i)=>{
          if(v.value == data.value){
            if(this.HOST != "static"&&data.isAdd){
              data.value = nodeId
            }
            data.status = 0
            parentNode.children.splice(i,1,data)
          }
        })
      }else{
        if(!data.isAdd){
          parentNode.children.forEach((v,i)=>{
            if(v.value == nodeData.value){
              data.label = nodeData.label
              parentNode.children.splice(i,1,data)
            }
          })
        }
      }
      this.runParam = {}
    }

Если вы найдете это полезным, добро пожаловать в звездуcalebman/vue-DBM

Категории