element UI中表格里的按钮显示不出来，如何解决？

Question

为什么element UI中表格里的按钮显示不出来，一个表格能显示，另一个显示不出来

＋添加商品

                <el-col :span="12"><div class="grid-content bg-purple" > <el-input  v-model="search" placeholder="请输入商品名" style="width: 400px" @input=""></el-input></div></el-col>

                    <el-table  :data="goodsTableData" id="goodsManger" >
                        <el-table-column label="商品图片" width="120">
                            <template slot-scope="scope">
                                <img v-if="scope.row.pics" :src="scope.row.pics" style="max-height: 50px; max-width: 50px;" />
                                <span v-else>No image</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="gno" label="编号" width="60">
                        </el-table-column>
                        <el-table-column prop="gname" label="产品名称" width="140">
                        </el-table-column>
                        <el-table-column prop="tno" label="类别" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.tno===1">新鲜水果</span>
                                <span v-else-if="scope.row.tno===2">海鲜水产</span>
                                <span v-else-if="scope.row.tno===3">猪牛羊肉</span>
                                <span v-else-if="scope.row.tno===4">禽类蛋乒</span>
                                <span v-else-if="scope.row.tno===5">新鲜蔬菜</span>
                                <span v-else-if="scope.row.tno===6">速冻食品</span>
                            </template>
                        </el-table-column>
                    <el-table-column prop="price" label="单价" width="60">
                    </el-table-column>
                        <el-table-column prop="unit" label="单位" width="60">
                        </el-table-column>
                        <el-table-column prop="balance" label="商品库存" width="120">
                    </el-table-column>
                        <el-table-column prop="weight" label="净含量" width="80">
                        </el-table-column>
                        <el-table-column prop="qperied" label="保质期" width="100">
                        </el-table-column>
                    <el-table-column prop="intro" label="描述"  width="200">
                    </el-table-column>
                        <el-table-column prop="" label="操作"  width="160">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="goodsHandleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="goodsHandleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                </el-table>
            </el-main>

                <el-main v-else-if="userMangerVisible">
                    <el-col :span="4" style="background: white"><el-button type="success" round>＋添加用户</el-button></el-col>
                    <el-col :span="8" style="background: white">
                        <template>
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </template>
                    </el-col>

                    <el-col :span="12"><div class="grid-content bg-purple" > <el-input  v-model="search" placeholder="请输入用户信息" style="width: 400px" @input=""></el-input></div></el-col>

                <el-table  :data="userTableData" id="userManger">
                    <el-table-column label="用户头像" width="100">
                        <template slot-scope="scope">
                            <img v-if="scope.row.photo" :src="scope.row.photo" style="max-height: 50px; max-width: 50px;" />
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mno" label="用户编号" width="60">
                    </el-table-column>
                    <el-table-column prop="nickname" label="用户名" width="140">
                    </el-table-column>
                    <el-table-column prop="pwd" label="密码" width="300">
                    </el-table-column>
                    <el-table-column prop="tel" label="电话号码" width="160">
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱地址" width="160">
                    </el-table-column>
                    <el-table-column prop="regDate" label="注册日期" width="140">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                    </el-table-column>
                    <el-table-column  label="操作1"  width="160">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="goodsHandleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="goodsHandleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                </el-main>

一个表格中能显示，另一个不能显示

Answer 1

源于ChatGPT仅供参考:

可能的原因是在表格里的按钮所在的列没有设置 `prop` 属性，导致无法正确显示数据。

例如，在第一个表格中，操作列的代码如下：

```html
<el-table-column prop="" label="操作"  width="160">
    <template slot-scope="scope">
        <el-button size="mini" @click="goodsHandleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="goodsHandleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
</el-table-column>

可以看到，该列的 prop 属性被设置为空字符串，这可能会导致问题。应该将其设置为实际数据对象的属性名，例如：

<el-table-column prop="id" label="操作" width="160">
    <template slot-scope="scope">
        <el-button size="mini" @click="goodsHandleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="goodsHandleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
</el-table-column>

其中 id 就是数据对象中表示唯一标识符的属性名。同样的修改也可以应用于第二个表格中的操作列。

```