我在使用饿了么表单时,想在表单里面插入一个图片作为表单信息头像,发现图片标签没办法获取到表单的属性,我一开始是这样写的:

<el-table :data="tableData">
    <el-table-column prop="" label="头像" width="180">
        <el-avatar :src="url"></el-avatar>
    </el-table-column>
</el-table>

而我的数据是这样的:

data() {
    return {
      tableData: [
            {
                name: "西红柿",
                url: "./image/xhs.png"
            },
            {
                name: "南瓜",
                url: "./image/ng.png"
            },
      ],
    }
};

我写完之后,发现根本就不能获取到url

解决办法:

<el-table-column prop="" label="头像" width="180">
    <template slot-scope="scope">
        <el-avatar :src="scope.row.url"></el-avatar>
    </template>
</el-table-column>

使用了template标签之后,可以使用slot-scope获取到table当前行的数据,再通过scope.row.url赋值给src就可以了


洛神_醉梦心
6 声望1 粉丝