el-table自定义展开行-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-table自定义展开行。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

expand-change,vue.js,elementui,前端

在el-table中：

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

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

template中完整代码如下：

<el-table :data="InfoTableData" 
        :height="tableHeight"
        :row-class-name="tableRowClassName"
        :row-style="selectedstyle"
        @selection-change="handleSelectionChange"
        @cell-click="handleOne"
        @row-click="handleRow"
        row-key="f_ID"
        :expand-row-keys="expandKeys"
        @expand-change="expandChange"
        style="width: 100% ; fontSize:16px; margin-top: 100px;"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="expand">
            <template #default="props">
                <div m="4">
                    <h3>展开明细</h3>
                    <el-table :data="props.row.expandRow" v-loading="loading" element-loading-text="加载中...">
                        <el-table-column label="物料编码" prop="maT_CODE" />
                        <el-table-column label="产品编码" prop="maT_LOT" />
                        <el-table-column label="产品名称" prop="maT_NAME" />
                        <el-table-column label="生产日期" prop="maT_DC" :formatter="getMatDC"/>
                        <el-table-column label="数量" prop="maT_QTY" />
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="序号" width="100">
            <template slot-scope="scope">
                {{scope.$index + 1}}
            </template>
        </el-table-column>
        <el-table-column label="状态" prop="f_STATE" width="60"/>
        <el-table-column label="送货单编号" prop="f_CODE" width="150"/>
        <el-table-column label="收货单编号" prop="receiptS_CODE" width="150"/>
        <el-table-column label="源单类型" prop="sourcE_ORDER_TYPE" width="100"/>
        <el-table-column label="源单编号" prop="sourcE_ORDER_CODE" width="100"/>
        <el-table-column label="供应商" prop="provider" width="100"/>
        <el-table-column label="生产商" prop="producer" width="100"/>
        <el-table-column label="送货日期" prop="senD_DATA" width="120" :formatter="dateFormat"/>
        <el-table-column label="收货地址" prop="receivE_ADDTESSES" width="100"/>
        <el-table-column label="客户" prop="customer" width="100"/>
        <el-table-column label="收货人" prop="receiver" width="100"/>
        <el-table-column label="收货人联系方式" prop="receiveR_PHONE_NUMBER"  width="140"/>
        <el-table-column label="创建人" prop="creatoR_ID" width="100"/>
        <el-table-column label="创建时间" prop="creatoR_TIME" width="120" :formatter="dateFormatCreate"/>
        <el-table-column label="审核人" prop="checK_NAME" width="100"/>
        <el-table-column label="审核时间" prop="checK_TIME" width="120" :formatter="dateFormatCheck"/>
        <el-table-column label="收货时间" prop="" width="120" :formatter="dateFormatRecive"/>
    </el-table>

解决展开行第一次展开数据不显示问题：在获取数据的时候往数据中追加一个expandRow字段（字段名可自定义）文章来源地址https://www.toymoban.com/news/detail-541714.html

获取数据的时候
...
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)
                }
            })
        },
}

到了这里，关于el-table自定义展开行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！