el-table自定义展开行

根据element ui官方文档说明，展开行需要用到两个属性：row-key 和 expand-row-keys，还有expand-change事件

 

 在el-table中：

row-key="f_ID"
:expand-row-keys="expandKeys"
@expand-change="expandChange"

 注意：row-key是数据的唯一标识。

template中完整代码如下：

解决展开行第一次展开数据不显示问题：在获取数据的时候往数据中追加一个expandRow字段（字段名可自定义）

获取数据的时候
...
this.InfoTableData.forEach(item => {
    item.expandRow = []
})
...

data(){
    return{
        InfoTableData:[],
        expandKeys:[],
        loading:true,
        fId:""
    }

},
methods:{
    // 展开行
        expandChange(row,expandRow){
            // 拿id
            this.fId = row.f_ID;
            //判断当前展开行是否有数据，没有则将expandKeys设为空
            if(!expandRow.length){
                this.expandKeys.shift()
                this.expandKeys = [];
                return;
            }
            //将展开行的f_ID push到expandKeys数组里面
            this.expandKeys = [];
            expandRow.forEach(item=>{
                this.expandKeys.shift()
                this.expandKeys.push(item.f_ID)
            })
            //判断是否关闭当前行
            if(expandRow.indexOf(row) == -1){
                this.expandKeys.shift()
                row.expandRow = [];
                return;
            }
            //发送axios请求
            this.$axios.post("/api/MESAPI/DeliveryOrder/GetDeliveryOrder",{
                "f_ID": this.fId
            }).then(res=>{
                if(res.data.code == 200){
                    this.loading = true;
                    //将数据赋值到追加的expandRow中
                    this.InfoTableData.forEach((item,index)=>{
                        if(item.f_ID === row.f_ID){
                            this.InfoTableData[index].expandRow = res.data.data.deliveryOrderDetail;
                            this.loading = false;
                        }
                    })
                }else{
                    alert(res.data.msg)
                }
            })
        },
}