vue+elementui 将后端传来数据编程tree结构、同一级别数据对象

前端目标代码：

     <ul v-loading="loading">        
        <li v-for="(item, index) in options"
            :key="index"
            :style="{ cursor: item.tic_parent_id != 0 ? 'pointer' : '' }"
            :class="checkItemId == item.tic_id ? 'checkItem' : ''"
            @click="checkItem(item)"
            v-if="item.tic_parent_id === 0 || item.bool">
          // bool true 展开 false 合上
          <span>
            <span class="iocn_span">
              <i @click.stop="isShrink(item)" v-if="item.tic_parent_id == 0" :class="item.isbool ? 'icon-jian' : 'icon-jia-'" class="iconfont"></i>
            </span>
            <span class="iocn_span" v-if="item.tic_parent_id != 0"></span>{{ item.tic_name }}
          </span>
          <!-- 编辑、删除 -->
          <span class="li_right">
            <i  v-if="$hasPerm('message:edit')" @click.stop="sysmenuEdit(item)" class="iconfont icon-bianji"></i>
            <i  v-if="$hasPerm('message:remove')" @click.stop="handleDelete(item)" class="iconfont icon-shanchushaixuanxiang"></i>
          </span>
        </li>
      </ul>

methods:

// 分类列表
    getOptation () {
      let that = this
      that.loading = true
      this.$post('/TbInfromationController/list', {
        page: 1,
        pageSize: 99999
      })
        .then(res => {
          that.loading = false
          if (res.code === 100) {
            let options = that.treeTable(res.data) // 改成上下级关系
            that.options = that.editDate(options) //  改成同级以便li显示
          } else {
            that.$message.info(res.message)
          }
        })
        .catch(res => {
          that.loading = false
        })
    },
    treeTable (data) {
      let newData = new Array()
      data.map(item => {
        if (item.tic_parent_id === 0) {
          newData.push(item)
        }
      })
      if (newData.length <= 0) {
        return data
      }
      newData.map(item => {
        item['children'] = []
        data.map(childrenitem => {
          if (item.tic_id === childrenitem.tic_parent_id) {
            item.children.push(childrenitem)
          }
        })
      })
      console.log(newData, data)
      return newData
    },
   // 类别数据处理
    editDate (data) {
      let array = []
      if (data.length) {
        data.map(item => {
          item['isbool'] = true
          array.push(item)
          if (item.children && item.children.length) {
            item.children.map(item_ch => {
              item_ch['bool'] = true
              array.push(item_ch)
            })
          }
        })
      }
      return array
    },

   isShrink (item) {
      console.log(item)
      console.log(this.options)
      item['isbool'] = !item['isbool']
      if (item.isbool) {
        this.options.map(dataitem => {
          if (dataitem.tic_parent_id === item.tic_id) {
            dataitem['bool'] = true
          }
        })
      } else {
        this.options.map(dataitem => {
          if (dataitem.tic_parent_id === item.tic_id) {
            dataitem['bool'] = false
          }
        })
      }
      this.$forceUpdate()
    },

isShrink 控制的是列表的展示与合并

1、后台传来数据

[
{
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 17:36:39"
tic_id: 22
tic_name: "111"
tic_parent_id: 16
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
},
{
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 17:27:44"
tic_id: 20
tic_name: "分类标题1-1"
tic_parent_id: 16
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
}
]

2、分级后数据

[
{
children: Array(2)
[{
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 17:36:39"
tic_id: 22
tic_name: "111"
tic_parent_id: 16
tic_user_id: 1
}
{
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 17:27:44"
tic_id: 20
tic_name: "分类标题1-1"
tic_parent_id: 16
tic_user_id: 1
}
length: 2
],
isbool: true
name: "ivan1"
tic_add_date: "2020-09-14 16:44:08"
tic_id: 16
tic_name: "分类标题1"
tic_parent_id: 0
tic_user_id: 1
},
{
children: Array(1)
[{
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 15:12:59"
tic_id: 15
tic_name: "111"
tic_parent_id: 14
tic_user_id: 1
length: 1
}]
isbool: true
name: "ivan1"
tic_add_date: "2020-09-11 16:59:26"
tic_id: 14
tic_name: "1122"
tic_parent_id: 0
tic_user_id: 1
}
]

　

   

3、将分级后数据变成同一级（方便<li>获取数据）

(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
0:
children: Array(2)
isbool: true
name: "ivan1"
tic_add_date: "2020-09-14 16:44:08"
tic_id: 16
tic_name: "分类标题1"
tic_parent_id: 0
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get children: ƒ reactiveGetter()
set children: ƒ reactiveSetter(newVal)
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
1:
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 17:36:39"
tic_id: 22
tic_name: "111"
tic_parent_id: 16
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
2:
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 17:27:44"
tic_id: 20
tic_name: "分类标题1-1"
tic_parent_id: 16
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
3:
children: Array(1)
0:
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 15:12:59"
tic_id: 15
tic_name: "111"
tic_parent_id: 14
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
length: 1
__ob__: Observer {value: Array(1), dep: Dep, vmCount: 0}
__proto__: Array
isbool: true
name: "ivan1"
tic_add_date: "2020-09-11 16:59:26"
tic_id: 14
tic_name: "1122"
tic_parent_id: 0
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get children: ƒ reactiveGetter()
set children: ƒ reactiveSetter(newVal)
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
4:
bool: true
name: "ivan1"
tic_add_date: "2020-09-14 15:12:59"
tic_id: 15
tic_name: "111"
tic_parent_id: 14
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
5:
children: Array(0)
isbool: true
name: "ivan1"
tic_add_date: "2020-09-11 16:54:24"
tic_id: 12
tic_name: "11"
tic_parent_id: 0
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get children: ƒ reactiveGetter()
set children: ƒ reactiveSetter(newVal)
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
6:
children: Array(3)
0:
bool: true
name: "ivan1"
tic_add_date: "2020-09-11 16:14:38"
tic_center: "11"
tic_id: 8
tic_name: "11"
tic_parent_id: 4
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_center: ƒ reactiveGetter()
set tic_center: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
1: {…}
2: {…}
length: 3
__ob__: Observer {value: Array(3), dep: Dep, vmCount: 0}
__proto__: Array
isbool: true
name: "ivan1"
tic_add_date: "2020-09-10 12:02:41"
tic_id: 4
tic_name: "test2"
tic_parent_id: 0
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get children: ƒ reactiveGetter()
set children: ƒ reactiveSetter(newVal)
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
7:
bool: true
name: "ivan1"
tic_add_date: "2020-09-11 16:14:38"
tic_center: "11"
tic_id: 8
tic_name: "11"
tic_parent_id: 4
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_center: ƒ reactiveGetter()
set tic_center: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
8:
bool: true
name: "ivan1"
tic_add_date: "2020-09-10 12:03:22"
tic_id: 6
tic_name: "2-222"
tic_parent_id: 4
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
9:
bool: true
name: "ivan1"
tic_add_date: "2020-09-10 12:03:13"
tic_id: 5
tic_name: "2-111"
tic_parent_id: 4
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
10:
children: Array(2)
0:
bool: true
name: "ivan1"
tic_add_date: "2020-09-10 12:02:29"
tic_id: 3
tic_name: "222"
tic_parent_id: 1
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
1: {…}
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array
isbool: true
name: "ivan1"
tic_add_date: "2020-09-08 08:33:02"
tic_id: 1
tic_name: "test"
tic_parent_id: 0
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get children: ƒ reactiveGetter()
set children: ƒ reactiveSetter(newVal)
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
11:
bool: true
name: "ivan1"
tic_add_date: "2020-09-10 12:02:29"
tic_id: 3
tic_name: "222"
tic_parent_id: 1
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
12:
bool: true
name: "ivan1"
tic_add_date: "2020-09-10 11:11:10"
tic_id: 2
tic_name: "111"
tic_parent_id: 1
tic_user_id: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get tic_add_date: ƒ reactiveGetter()
set tic_add_date: ƒ reactiveSetter(newVal)
get tic_id: ƒ reactiveGetter()
set tic_id: ƒ reactiveSetter(newVal)
get tic_name: ƒ reactiveGetter()
set tic_name: ƒ reactiveSetter(newVal)
get tic_parent_id: ƒ reactiveGetter()
set tic_parent_id: ƒ reactiveSetter(newVal)
get tic_user_id: ƒ reactiveGetter()
set tic_user_id: ƒ reactiveSetter(newVal)
__proto__: Object
length: 13
__ob__: Observer {value: Array(13), dep: Dep, vmCount: 0}
__proto__: Array