ZM—表单无数据显示长横线

element UI 表单没有数据的时候显示长横线

项目要求：

制作列表，有数据的时候显示数据，没有数据的时候显示长横线

---

问题描述：

原始列表：此时无数据会空出来，影响观瞻

<div style="margin-left:5%;margin-right:-5%">
                <el-table
                        :data="tableData"
                        border
                        height="1950"
                        style="width: 90%"
                >
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="post" label="职务">
                    </el-table-column>
                    <el-table-column prop="time" label="入井时间">
                    </el-table-column>
                    <el-table-column prop="duration" label="入井时长">
                    </el-table-column>
                </el-table>
            </div>

---

解决方案：

在el-table内的每一项添加template如下：

<div style="margin-left:5%;margin-right:-5%">
                <el-table
                        :data="tableData"
                        border
                        height="1950"
                        style="width: 90%"
                >
                    <el-table-column prop="name" label="姓名">
                        <template slot-scope="{row}">
                            {{ row.name || '——' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="post" label="职务">
                        <template slot-scope="{row}">
                            {{ row.post || '——' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="入井时间">
                        <template slot-scope="{row}">
                            {{ row.time || '——' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="duration" label="入井时长">
                        <template slot-scope="{row}">
                            {{ row.duration || '——' }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>