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

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 安装GroudingDINO RuntimeError: Error compiling objects for extension
  • ¥15 关于推送项目到github的问题
  • ¥15 急!C++指针编写相关的问题
  • ¥15 kerberos身份认证配置问题
  • ¥30 用python写一个多签情况下波场的代理资源和回收资源
  • ¥15 怎么在matlab中输出显示泵的流量-扬程和管路损失与流量均在一个表格里
  • ¥15 matlab学期例题代码答疑
  • ¥15 在线手电筒追加按钮JS
  • ¥15 调用函数时,无关变量的改变引起函数值的改变
  • ¥15 xy坐标转化为经纬度坐标