First, dynamic tree structure rendering

Prototype figure

The problem

1. What data structure does the background need to provide
2. How is page rendering implemented
3. How do I get the value of the input field

solution

1. The options option of the first select should be provided for each data entry. The following text box requires input type; Data format switch when switching to interval input, unique name attribute of each data.
2. Encapsulate as a component, render the first select through the passed optios, and render the text input box using v-if based on the passed Type of Type.
3. The value obtained by the parent component’s V-for traversal is passed to the props component for rendering. The child component then returns the value to the parent component via emit in the Watch event. The parent component uses the eval method to declare the name property as a unique object corresponding to the child component.

Code snippet

The parent component

<template>
<div style="border-bottom: 1px #d1dbe5 solid; padding-bottom: 1rem; margin-bottom:1rem"</div> <typeElement v-for="a in getDataP.base_ids" :message="a" :detali="getDataP.basic_options" :onlyreaderlock="onlyreaderlock"  @fuzhi="fuzhifun1"></typeElement> 
<template>
<script>
import typeElement from "./element.vue"
export default {
data() {return{ensureP: {basic_options: {}}}},created() {<! Get background data --> <! }, method:{fuZHIfun1 (e){eval("this.ensureP.basic_options."+e.name+"=e")
        },
    },
}
</script>
Copy the code

Child components

<template>
<el-row>
 <el-col :span="3">{{message.rulename}}</el-col>
 <el-col :span="4">
          <el-select v-model="selectP" placeholder="Please select" size="mini" :disabled="onlyreaderlock">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
           </el-select>
 </el-col>
 <el-col :span="12"> <! - to update -- > < / el - col > < / el - row > < / template > < script >export default {
props:["message"."detali"."onlyreaderlock"].data() {
        let self = this;
        return {
          cityOptions : ['Shanghai'.'Beijing'.'guangzhou'.'shenzhen'],
          checkList:[],
            pickerOptions0: {
          disabledDate(time) {
            returnTime.gettime () < date.now () -8.64e7; } }, showOK:true// Make sure that the day after tomorrow is not empty, if it is empty then hide selectP:"",
            option:[],
            inputP:[],
            ppp:{flag:"",val:""}}},created() {<! -->}, watch: {"selectP":function(){ 
            this.ppp.name=this.message.custom_field
            this.ppp.flag=this.selectP
            this.$emit("fuzhi",this.ppp)
        },
        "inputP":function(){
            this.ppp.name=this.message.custom_field
            this.ppp.val=this.inputP
             this.$emit("fuzhi",this.ppp)
        }
       
    },
}
</script>
Copy the code

Two, recursion tree

Prototype figure

The problem

1. Add event, add object is dynamic, how to dynamically bind
2. Structure is infinite, how to implement.

solution

1. The parent component can change the value of the parent component (although this two-way data flow is not officially advocated). The parent component a.b object is passed to the child component through props, and the child component makes changes to the PARENT component a.B object
2. You can use the idea of recursion, that when you pass in an object that has a child attribute, you can continue recursively using itself (you declare the name attribute).

Code snippet

The parent component

<template>
  <div class="hello">
    <h1 class="iconfont icon-smile"> </h1> <ul id="demo">
      <item class="item" :model="treeData">
      </item>
    </ul>
  </div>
</template>
<script>
import item from './cccc.vue'
export default {
  created() {

  },
  methods: {
  },
  components: { item },
  data() {
    return {
      b: "",
      treeData: {
        name: Bee-casting network,
        children: [
          { name: 'administration' },
          { name: 'personnel' },
          {
            name: 'Technology Center',
            children: [{
                name: 'Li Gong',
                children: [
                  { name: 'the PHP group' ,
                    children:[
                    {name:'generation yee'},
                    {name:'Yao Meimei'}]},
                  { name: 'the js group',
                   children:[
                   {name:"Elder brother" to recognize},{name:"Teacher Tang"},{name:'fat'}]}
                ]
              },
              { name: 'Tan Gong' },
              { name: 'dragon workers' },
              
            ]
          }
        ]
      }
    }
  }
}

</script>
Copy the code

Code snippet

Child components

<template>
  <div class="hello">
   <li>
    <div
      :class="{bold: isFolder}"
       @click="toggle"
       @dblclick="changeType"> <! <img SRC = <img SRC =".. /.. /assets/arrow-right.png"  v-if="isFolder" style="width: 1rem; The transition: transform 0.5 s" :style="{transform: ttt } ">
         {{model.name}}
    </div>
    <ul v-show="open" v-if="isFolder">
      <item
        class="item"
        v-for="model in model.children"
        :model="model">
      </item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
  </div>
</template>
<script>
export default {
  name: 'item',
 props: {
    model: Object
  },
  data: function () {
    return {
      open: false,
      ttt:'rotate(0deg)'
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        if(this.ttt=="rotate(90deg)"){
        this.ttt='rotate(0deg)'
      }else{
        this.ttt='rotate(90deg)'
      }
      setTimeout(()=>{this.open = ! this.open},50) } }, changeType:function () {
      if(! this.isFolder) { console.log("db")
        this.$set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
      let a =prompt("Please enter your name"."Name")
      if(a){
      this.model.children.push({
        name: a
      })}
    }
  }
}
</script>
Copy the code