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

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条回答 默认 最新

相关推荐 更多相似问题