vue vuecli element table 表格 獲取行數據

 

是這樣的,頁面是商品列表

使用了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就是我需要的圖片路徑