vue自动触发事件

项目中进入页面 先请求后台渲染一个列表，然后点击每个列表过后，再次请求后台加载该列表项下面的子列表，类似异步加载树行结构数据。
现在效果已经实现，但是需求需要当页面进入的时候，就要把第一个列表项的第一个节点默认打开，方案有2种

方案1：使用vue的自定义指令

   <div
       v-for="(i, index) in Devlist"
       :key="i.id"
       :id="index" 
       v-trigger
       @click="showInfo(i, index)"
       >
      .....

directives: {
    trigger: {
      inserted(el, binding) {
        console.log('el>>', el)
        // 这里需要在触发前先进行判断，因为上面的 是用v-for循环出来的一个列表，每一项都有v-trigger
        if (el.id === '0') {
          el.click() // 如果是第一项，则触发点击事件，需要在循环的时候给对应的列表项绑定一个id值
        }
      }
    }
  },

方案2：

再请求完成初始列表后，携带父列表里面相关的参数，接着发起下一级的请求，该方案适合只有2级的情况，用自定义指令可以实现多级的触发

      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('任务列表的参数:', requestParameters)
        return getTaskDevLogList(requestParameters).then(res => {
          // 在这里第一个list数据请求成功后，给下一个请求的参数赋值，然后再触发下个请求，我这里用的是antdv封装好的stable组件，只需要刷新表格组件就携带参数可发起新的请求
          const record = res.result.data[0]
          this.idx = record.id
          this.querydevParam.filter['id'] = record.id
          this.$refs.devtable.refresh()  //刷新表格组件，携带新的参数更新表格
          return res.result
        })
      },
      .....
     // 表格参数
      querydevParam: {
        qTarget: 1,
        filter: { id: -1, viewType: 1, result: 0, sTime: 0, eTime: 0 }
      },
      // 加载任务下的设备列表数据
      loadDevData: parameter => {
        const requestParameters = Object.assign(
          {},
          parameter,
          this.querydevParam,
          this.filter
        )
        console.log('请求任务下的设备列表的参数:', requestParameters)
        return getTaskDevLogList(requestParameters).then(res => {
          return res.result
        })
      }

参考文献 https://blog.csdn.net/peijiajing/article/details/102899771