zoukankan      html  css  js  c++  java
  • vue vuecli element table 表格 获取行数据

    是这样的,页面是商品列表

    使用了element-ui  中的   el-table

    正常渲染是没问题的,可是我需要显示商品图片,这就需要先获取到每个商品对象的图片路径,但是看element文档没有说怎么获取数据的,只是能够在列中使用prop

    经过百度,知道了vue的插槽,代码如下

              <el-table :data="goods" stripe border style=" 100%">
                        <el-table-column prop="name" label="名称" width="180"></el-table-column>
                        <el-table-column label="图片" width="50">
                            <template v-slot="shuju">
                                <el-image :src="'/static/images/food/'+shuju.row.img"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="typeid" label="typeid" width="100"></el-table-column>
                        <el-table-column prop="price" label="单价" width="100"></el-table-column>
                        <el-table-column prop="xiaoliang" label="销量" width="50"></el-table-column>
                        <el-table-column label="操作"></el-table-column>
                    </el-table>

    图片列中,使用了插槽,原先是slot-scope,貌似新版本打算弃用,使用了v-slot    "shuju"是随便写的名字,只要里面调用就可以了   shuju.row 是获取的商品对象,shuju.row.img就是我需要的图片路径

  • 相关阅读:
    [转]Torch是什么?
    去掉 CONSOLE 窗口(转)
    最短路径问题
    最短路,dijstra算法
    最短路,floyd算法,图的最短路径
    freckles
    还是畅通工程,最小生成树kruskal
    More is better
    畅通工程
    人见人爱
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/12677010.html
Copyright © 2011-2022 走看看