el-tree的使用

1、要求只展开二级节点，且根据选择的节点id去后台拿数据并展示在表格中，刷新页面，并展开相应的父节点，当页面跳转后，返回当前页面，依然保持在之前选中的节点位置。

将多选框设置为单选，根据点击的节点id去后台取数据。
具体代码如下：

<template>
  <div class="app-container">
  //el-scrollbar 设置滚动条
      <el-scrollbar :style="scrollbarH">
        <el-tree
          ref="tree"
          :data="typeTree"
          :props="defaultProps"
          :check-strictly="true"
          :highlight-current="true"
          :default-expanded-keys="expandedkeys"
          :default-checked-keys="expandedkeys"
          :expand-on-click-node="false"
          show-checkbox
          node-key="id"
          @check-change="checkChange"
          @node-click="handleNodeClick"
        />
      </el-scrollbar>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/baseStockInit'
import { del } from '@/api/icinventory'
import { stockClassify } from '@/api/stock'

export default {
  mixins: [initData],
  data() {
    return {
      height: 625,
      loading: false,
      query: {},
      scrollbarH: { height: '' },
      defaultProps: {
        children: 'list',
        label: 'stockName'
      },
      delLoading: false,
      typeTree: [],
      expandedkeys: [],
      stockId: null
    }
  },
  created() {
    this.$nextTick(() => {
      this.height = document.documentElement.clientHeight - 240
      this.scrollbarH.height = document.documentElement.clientHeight - 240 + 'px'
    })
  },
  mounted() {
  //当浏览器窗口发生改变的时候刷新页面高度
    window.onresize = () => {
      return (() => {
        this.height = document.documentElement.clientHeight - 240
        this.scrollbarH.height = document.documentElement.clientHeight - 240 + 'px'
      })()
    }
  },
  //页面数据缓存 可记录选中的节点
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const data = JSON.parse(window.sessionStorage.getItem('icinventoryData'))
      if (data === null) {
        vm.initstock()
      } else {
        vm.loading = data.loading
        vm.query = data.query
        vm.data = data.data
        vm.total = data.total
        vm.page = data.page
        vm.size = data.size
        vm.height = data.height
        vm.defaultProps = data.defaultProps
        vm.delLoading = data.delLoading
        vm.queryTypeOptions = data.queryTypeOptions
        vm.typeTree = data.typeTree
        vm.expandedkeys = data.expandedkeys
        vm.stockId = data.stockId
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    const temp = {}
    temp.loading = this.loading
    temp.query = this.query
    temp.data = this.data
    temp.total = this.total
    temp.page = this.page
    temp.size = this.size
    temp.height = this.height
    temp.defaultProps = this.defaultProps
    temp.delLoading = this.delLoading
    temp.queryTypeOptions = this.queryTypeOptions
    temp.typeTree = this.typeTree
    temp.expandedkeys = this.expandedkeys
    temp.stockId = this.stockId
    window.sessionStorage.setItem('icinventoryData', JSON.stringify(temp))
    next()
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = 'api/icinventory'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const type = 'material'
      const value = query.value
      if (type && value) {
        this.params[type] = value
      }
      this.params.stockId = this.stockId
      return true
    },
    getData() {
      stockClassify().then(res => {
        console.log(res, '树形列表返回数据')
        this.typeTree = res
      })
    },
    //只刷新点击树形列表节点返回的表格数据，不用重新刷新树形列表
    refresh() {
      this.init()
      this.getData()
    },
    //初次进页面时的获取数据方法
    initstock() {
      this.query = {}
      this.page = 0
      this.size = 20
      this.stockId = null
      this.init()
      this.getData()
      this.$refs.tree.setCheckedKeys([])
    },

    // 点击复选框时触发
    checkChange(item, node, self) {
     // console.log(item, 'item')   //当前选中节点的元素
      // console.log(node, 'node')  //true  or false   是否选中当前节点
      // console.log(self, 'self')
      this.expandedkeys = []
      if (node === true && item.id !== null) {
        this.stockId = item.id
        this.page = 0
        this.size = this.size
        this.init()
        this.expandedkeys.push(item.id)//设置默认展开的节点
        this.$refs.tree.setCheckedKeys([item.id])  // 设置为单选
      } else if (node === true && item.id === null) {
        return this.$message({
          message: '请选择下面的子项',
          type: 'warrming'
        })
      }
    },
    // 点击节点时触发方法 在该方法中又设置了复选框的选中状态，在执行完节点点击方法后，会默认触发复选框选中改变的方法，
    //在这里就不需要再调接口去后台拿数据了,要不然会发两次相同的请求到后台去
    handleNodeClick(item, node, self) {
      this.expandedkeys = []
      this.stockId = item.id
      if (item.id !== null) {
         this.$refs.tree.setCheckedKeys([item.id]) 
      }else {
        return this.$message({
          message: '请选择下面的子项',
          type: 'warrming'
        })
      }
    }
  }
}
</script>

<style  lang="scss" >
 .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    color: #4d95fd; //修改选中的颜色
    font-weight: bold;
}
</style>