实战

---

1、后台返回的数据是一维数组，而我们想要的是嵌套(二维以上)数组，协商不妥时😂

// parentCode 对应父级 code
let arr = [
    { parentCode: '-1', code: '0', name: '父级1' },
    { parentCode: '0', code: '1', name: '父级1-1' },
    { parentCode: '0', code: '2', name: '父级1-2' },
    { parentCode: '2', code: '21', name: '子级21' },
]
		
function buildTree (arr) {
    let temp = {}
    let tree = {}
    // 数组转 键值对
    arr.forEach(item => {
        temp[item.code] = item
    })

    let tempKeys = Object.keys(temp)
    tempKeys.forEach(key => {
        // 获取当前项
        let item = temp[key]
        // 当前项 parentCode
        let _itemParentCode = item.parentCode
        // 获取父级项
        let parentItemByParentCode = temp[_itemParentCode]
        if (parentItemByParentCode) {
            if (!parentItemByParentCode.children) {
                parentItemByParentCode.children = []
            }
            parentItemByParentCode.children.push(item)
        } else {
            tree[item.code] = item
        }
    })
    // 对象转数组并返回
    return Object.keys(tree).map(key => tree[key])
}
console.log(buildTree (arr))
// [
//     {
//         parentCode: '-1', 
//         code: '0', 
//         name: '父级1', 
//         children: [
//             {
//                 parentCode: '0', 
//                 code: '1', 
//                 name: '父级1-1',
//             },
//             {
//                 parentCode: '0', 
//                 code: '2', 
//                 name: '父级1-2', 
//                 children: [
//                     parentCode: '2', code: '21', name: '子级21'
//                 ]
//             }
//         ],
//     },
// ]



//一级与二级相同的嵌套

let arr = [
     { date: '2020-01-06', age: '18'},
     { date: '2020-01-06', age: '25'},
     { date: '2020-01-07', age: '34'},
     { date: '2020-01-07', age: '18'},
     { date: '2020-01-07', age: '38'},
     { date: '2020-01-08', age: '26'},
     { date: '2020-01-09', age: '24'}
   ]
   
function buildNest(arr){
	let dataArr = [];
	arr.map(mapItem => {
	  if (dataArr.length == 0) {
		  dataArr.push({ date: mapItem.date, List: [mapItem] })
	  } else {
		 let res = dataArr.some(item=> {//判断相同日期，有就添加到当前项
		  if (item.date == mapItem.date) {
			item.List.push(mapItem)
			return true
		  }
		})
		if (!res) {//如果没找相同日期添加一个新对象
			dataArr.push({ date: mapItem.date, List: [mapItem] })
		}
	  }
	}) 
	return dataArr
} 
console.log(arr)
// [
//     {
//         date:'2020-01-06',
//         List: [
//             { date: '2020-01-06', age: '18'},
//             { date: '2020-01-06', age: '25'}
//         ]
//     },
//     {
//         date:'2020-01-07',
//         List: [
//             { date: '2020-01-07', age: '34'},
//             { date: '2020-01-07', age: '18'},
//             { date: '2020-01-07', age: '38'},
//         ]
//     },
//     {
//         date:'2020-01-08',
//         List: [
//                 { date: '2020-01-08', age: '26'},
//         ]
//     },
//     {
//         date:'2020-01-09',
//         List: [
//             { date: '2020-01-09', age: '24' }
//         ]
//     }
// ]

在Element-ui的table表格中，如何让分页的序号延续上一页的序号

问题：在使用element-ui 的table表格时，会发现它每一页的序号都会从1开始，那怎么才能让它延续上一页的序号呢？

利用计算属性解决问题：

<el-table-column type="index" :index="hIndex" label="序号" width="120" />
 
export default {
  data() {
    return {
      page: 1, //当前页数
      pagesize: 2, //每页两条数据
    }
  },
 
  // 计算属性
  computed: {
    hIndex() {
      // 当前页数 - 1 * 每页数据条数 + 1
      return (this.page - 1) * this.pagesize + 1
    }
  }
}


利用函数方法解决问题

methods: {
  hIndex(index) {
      // 当前页数 - 1 * 每页数据条数 + index + 1 （ index 是索引值，从0开始）
      return (this.page - 1) * this.pagesize + index + 1
    }
}

element tree添加图标

<svg-icon icon-class="tree" />  可换成对应的icon图标

添加
<span class="custom-tree-node" slot-scope="{ node }">
    <span> <svg-icon icon-class="tree" />{{ node.label }} </span>
</span>

完整
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current @node-click="handleNodeClick">
    <span class="custom-tree-node" slot-scope="{ node }">
        <span> <svg-icon icon-class="tree" />{{ node.label }} </span>
    </span>
</el-tree>