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