• 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就是我需要的图片路径

  • 相关阅读:
    字符数组,字符指针,字符串常量以及其sizeof的一些总结
    Linux——makefile
    动态定义多维数组
    二叉树的前序、中序、后序遍历(非递归)
    构造函数、析构函数抛出异常的问题
    倒排索引
    宏定义
    sizeof && strlen
    搜索引擎技术原理
    最小生成树
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/12677010.html
Copyright © 2020-2023  润新知