vue实现递归循环渲染日志发布

递归本质就是自己调用自己，无论是函数还是html，递归数组渲染，其实就是在组件内部调用自己的组件，实现循环渲染。

父组件

<template>
  <div class="logs">
    <el-row :gutter="20" v-for="(item, index) in logList" :key="index">
      <el-row>
        <el-col :span="22">
          <span class="nowTime">{{item.createDate}}</span>
          <span>{{'记录人：'+item.employeeName}}</span>
        </el-col>
        <el-col :span="2" v-if="item.employeeId != loginID">
          <span style="color:#1890FF;cursor: pointer;" @click="replay(item, index)">回复</span>
        </el-col>
      </el-row>
      <el-row class="logs_text">{{item.content}}</el-row>
      <el-row class="logChild_back" v-if="item.caseDiscussCliList.length>0">
        <logsChild :caseDiscussCliList="item.caseDiscussCliList" @replayHandle="replayHandle"></logsChild>
      </el-row>

    </el-row>
    <div v-if="detail !== 'detail'">
      <div class="site">
        <el-input type="textarea" :rows="4" :placeholder="hide === 'textarea'?'工作日志':'回复'" 
                  class="textarea" :maxlength=200 @input="descInput" v-model="desc"></el-input>
      </div>
      <el-button class="btn" @click="hide = 'textarea'">写日志</el-button>
      <el-button type="primary" @click="output">{{hide === 'textarea'?'发布':'回复'}}</el-button>
    </div>
  </div>
</template>

<script>
import logsChild from './logs-child'
export default {
  props: {
    logList: {
      type: Array,
      default: []
    },
    stepflowId: {
      type: Number,
      default: null
    },
    detail: {
      type: String,
      default: ''
    }
  },
  name: 'logs',
  components: {
    logsChild
  },
  data () {
    return {
      loginID: '',
      desc: '',
      hide: 'textarea',
    };
  },
  created () {
    // 登陆人id
    this.loginID = sessionStorage.getItem("id");
  },
  methods: {
    output () {},
    replay (item, index) { },
    // 子组件回复函数
    replayHandle (params, hide) {}
  }
};
</script></style>

子组件

<template>
  <div class="logs_child">
    <el-row v-for="(val,idx) in caseDiscussCliList" :key="idx" class="logs_replay">
      <el-col :span="20" class="nowTime">{{val.createDate}}</el-col>
      <!-- 判断自己不能回复自己 -->
      <el-col :span="2" v-if="val.employeeId != loginID" style="color:#1890FF;cursor: pointer;" 
               @click.native="replay(val, idx)">回复</el-col>
      <el-col :span="24" class="reply_name">
        <el-col :span="4">{{val.employeeName+' 回复：'}}</el-col>
        <el-col :span="20">{{val.content}}</el-col>
      </el-col>
      <!-- 内部调用自己组件 -->
      <logsChild :caseDiscussCliList="val.caseDiscussCliList" v-if="val.caseDiscussCliList.length >0"></logsChild>
    </el-row>

  </div>
</template>

<script>
export default {
  props: {
    caseDiscussCliList: {
      type: Array,
      default: []
    }
  },
  name: 'logsChild',
  data () {
    return {
      loginID: '',
      hide: 'textarea',
    };
  },
  created () {
    this.loginID = sessionStorage.getItem("id");
  },
  methods: {
    replay (item, index) { }
  }
};
</script>

<style lang="less" scoped></style>