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

原文地址：https://www.cnblogs.com/zonglonglong/p/12677010.html

时间： 2024-10-07 20:24:28

vue vuecli element table 表格 获取行数据的相关文章

从$res获取行数据

1 从$res获取行数据的时候,处理 mysql_fetch_row($res),还有三个方法. 2 分别是 3 mysql_fetch_row($res) ,返回一个索引的数组 (推荐.) 4 mysql_fetch_assoc($res) ,返回一个关联数组 5 mysql_fetch_array($res) ,返回索引数组和关联数组 (两套) 6 mysql_fetch_object($res) ,把一行数据,当做一个对象返回.

Vue. 之 Element table 高度自适应

Vue. 之 Element table 高度自适应 使用vue创建table后,其高度自适应浏览器高度. 在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight) 1 <el-table 2 :data="tableData" 3 :height="tableHeight" 4 border 5 style="width: 100%"> 在script中的data() 中添加高度的定义: 这里的

easyui点击行内编辑，怎么获取行数据并赋值

第一:先获取formate格式化方法中的index值,定义data方法获取数据表格中的数据, 例如:function format(value,index,row){}: var data = $('#dg').datagrid('getData'); 第二:获取行的下标,然后打开dialog窗体,例如:通过下标获取数据,var row = data.rows[index];    打开dialog窗体,$('#edit').dialog('open'); 第三:用setValue赋值 ,例如:

对Table的操作(赋值、动态新增行、删除行、保存table中多行数据对象

一.成品界面: 二.功能点描述 从后台传list对象,前台table展示. 可添加行操作,新增或者删除行. 三.源码: Form表单: <form id="reportForm" method="post"> <table class="table-grid table-list" cellpadding="1" cellspacing="1" id="reportTable&q

Vue 使用 Vuex 和 axios 获取接口数据

修改原型链 //main.js import axios from 'axios'; Vue.prototype.$ajax = axios; //修改原型链 // .vue文件 methods:{ getData(){ this.$ajax.get('https://easy-mock.com/mock/5d41481656e5d340d0338e4b/shop/commodity') .then(res => { console.log(res) }).catch(err => { con

jquery ui选中表格多行数据

<script src="../public/js/jquery-1.8.3.js"></script> <script src="../public/js/jquery-ui-1.10.4.custom.js"></script> <script src="../public/js/jquery-ui.js"></script> <link rel="sty

在repeart中获取行数据

ItemCreated(){ if (e.Item.DataItem != null) { string examTypeId = ((DataRowView)e.Item.DataItem).Row["columnName"].ToString(); e.Item.FindControl("webButton").Visible = true; } }

vue，elementui——table表格中的:formatter属性

:formatter 常用来格式化内容 Function(row, column, cellValue, index) 使用: <el-table-column label="发布时间" prop="createTime" :formatter="dateFormat"></el-table-column> script 导入moment并定义: import moment from 'moment' export def

elementUi设置table表格某些行不能选择

selectable为element-ui提供的属性,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选,返回true为可选,false为不可选. <el-table-column type="selection" :selectable="checkSelectable" align="center" width="75"></el-table-column