night_afternoon 2021-01-26 12:39 采纳率: 50%
浏览 1212
已采纳

el-table怎么回显后端发来的集合数据

<template>
    <div style="height: 96%" align="center">
        <div style="height: 700px;width: 600px">
            <el-table
                    :data="maintains"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="报修业主">
                                <span>{{props.row.mname }}</span>
                            </el-form-item>
                            <el-form-item label="报修地址">
                                <span>{{ props.row.mdestination }}</span>
                            </el-form-item>
                            <el-form-item label="报修电话">
                                <span>{{ props.row.mphone }}</span>
                            </el-form-item>
                            <el-form-item label="报修描述">
                                <span>{{ props.row.mdescribe }}</span>
                            </el-form-item>
                            <el-form-item label="报修价格">
                                <span>{{ props.row.mprice }}</span>
                            </el-form-item>
                            <el-form-item label="缴费状态">
                                <span>{{ props.row.mpaystate }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="报修日期"
                        prop="mdate">
                </el-table-column>
                <el-table-column
                        label="报修状态"
                        prop="mstate">
                </el-table-column>
                <el-table-column
                        label="报修评价"
                        prop="mevaluate">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "OmaintianViw",
        data() {
            return {
                // maintains:[{
                //     mname:'',
                //     mdestination:'',
                //     mphone:'',
                //     mdate:'',
                //     mdescribe:'',
                //     mprice:'',
                //     mstate:'',
                //     mpaystate:'',
                //     mevaluate:'',
                // },]
                maintains: []
            }
        },
        mounted() {
            this.gainmaintain()
        },
        methods: {
            //获取用户的报修列表
            gainmaintain() {
                this.$store
                    .dispatch("Ogainmaintain", this.$store.state.loginUserInfo.name)
                    .then(response => {
                        let code = response.data.code;
                        if (code === 200) {
                            this.$message.success(response.data.msg);
                            console.log(response.data)
                        } else if (code === 400) {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(() => {
                        //this.loading = false;
                    });
            }
        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
  • 写回答

4条回答 默认 最新

  • 简_洋 2021-01-26 15:02
    关注

    你那不是都写好了吗?有啥问题吗?  唯一的就是你 maintains 没有在ajax成功后接收数据。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 MATLAB动图问题
  • ¥15 有段代码不知道怎么理解,const isToken = (config.headers || {}).isToken === false
  • ¥100 采用栈和深度优先算法对我的代码进行修改显示路径
  • ¥15 pointnet2包安装
  • ¥20 射频功率问题,解答者有酬谢!
  • ¥80 构建降雨和积水的预测模型
  • ¥15 #Qt Transform setTransform()在鼠标拖动移动视角是一致在原地不动,无法变换视角(细微观察似乎视图有在原地抖动),无法变换视角(细微观察似乎视图有在原地抖动)
  • ¥50 如何利用无人机拍摄的数码照片测量鸟卵的长短径
  • ¥100 github贡献者给与奖励
  • ¥15 使用DS18B20+ESP8266获取温度数据返回-127.00