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 echarts动画效果的问题,请帮我添加一个动画。不要机器人回答。
  • ¥60 许可证msc licensing软件报错显示已有相同版本软件,但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加