vue vuecli element table 表格 获取行数据

Posted 2021-03-01 zonglonglong

 

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

使用了element-ui  中的   el-table

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

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

　　　　　　　　　　<el-table :data="goods" stripe border style="width: 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就是我需要的图片路径