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 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
  • ¥15 Windows11, backspace, enter, space键失灵