el-table-column prop="pushMoney" 根据el-table :data="dataList" 获取 prop获取到的值怎么进行字符串拼接
时间: 2024-05-06 19:15:31 浏览: 10
如果您想要将 `prop` 获取到的值进行字符串拼接,可以使用 `template` 插槽和 ES6 模板字符串来实现。具体操作如下:
1. 在 `el-table-column` 中使用 `template` 插槽,如下所示:
```
<el-table-column label="推广费" width="120">
<template slot-scope="scope">
{{ `¥ ${scope.row.pushMoney}` }}
</template>
</el-table-column>
```
2. 在 `template` 中使用 ES6 模板字符串来将 `pushMoney` 的值与其他字符串拼接起来。例如,上面的代码中,我们使用了模板字符串来将 `¥` 和 `pushMoney` 的值拼接起来,最终得到的结果类似于 `¥ 100`。
注意:在模板字符串中,变量名要使用 `${}` 包裹起来,例如 `${scope.row.pushMoney}`。
希望对您有所帮助!
相关问题
getList() { this.loading = true // 结果赋值给this.dataList listDishByPage(this.queryParams).then((response) => { this.dataList = response.data.list this.loading = false this.total = response.data.total } ) }<el-table-column label="编号" align="center" prop="dishNo" /> <el-table-column label="名称" align="center" prop="dishName" /> <el-table-column label="价格" align="center" prop="price" /> <el-table-column label="图片" align="center" prop="fileUrl" /> <el-table-column label="口味" align="center" prop="flavor" /> <el-table-column label="原材料" align="center" prop="ingredients" /> <el-table-column label="烹饪方式" align="center" prop="cookingMethod" />其中后端返回的image为文件名,需要调用selectByFileName,传入image参数,返回fileUrl,要怎么写
你可以在 getList() 方法中,在获取到菜品列表数据后,对每个菜品的 image 字段调用 selectByFileName() 方法,将其替换为返回的 fileUrl,例如:
```
getList() {
this.loading = true;
listDishByPage(this.queryParams).then((response) => {
this.dataList = response.data.list;
this.loading = false;
this.total = response.data.total;
this.dataList.forEach((dish) => {
selectByFileName(dish.image).then((url) => {
dish.fileUrl = url;
});
});
});
}
```
这个方法首先将 loading 状态设为 true,然后调用菜品列表接口,获取菜品列表数据。当数据返回后,将 loading 状态设为 false,并将列表数据和总数分别赋值给 this.dataList 和 this.total。接着,对于每个菜品,都调用 selectByFileName() 方法,将其 image 字段替换为返回的 fileUrl。最后,将处理好的列表数据渲染到 el-table 中。
原生js el-table
原生JS中的el-table是指element-ui库中的表格组件。它可以通过使用element-ui提供的API来创建和操作表格。在原生JS中,可以使用以下代码来创建el-table组件:
```javascript
// 创建el-table组件
var table = document.createElement('el-table');
table.setAttribute('v-loading', 'dataListLoading');
table.setAttribute(':data', 'dataList');
table.setAttribute('border', '');
table.setAttribute('align', 'center');
// 创建el-table-column组件
var column = document.createElement('el-table-column');
column.setAttribute(':label', 'item.propName');
column.setAttribute(':property', 'item.propItem');
column.setAttribute('v-for', 'item in tableColumnList');
column.setAttribute(':key', 'item.prop');
column.setAttribute('align', 'center');
// 创建template和span元素
var template = document.createElement('template');
var span = document.createElement('span');
span.textContent = '{{scope.row\[scope.column.property\]}}';
// 将span元素添加到template中
template.appendChild(span);
// 将template元素添加到el-table-column组件中
column.appendChild(template);
// 将el-table-column组件添加到el-table组件中
table.appendChild(column);
// 将el-table组件添加到页面中的某个元素中
var container = document.getElementById('container');
container.appendChild(table);
```
以上代码是通过原生JS动态创建el-table组件的示例。你可以根据自己的需求进行修改和扩展。
#### 引用[.reference_title]
- *1* [el-table 动态表格实现+原生表格实现代码](https://blog.csdn.net/weixin_50748620/article/details/123419248)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [el-table表格——获取单击的是第几行和第几列 & 表格排序之el-table与sort-change、el-table-column与sort-...](https://blog.csdn.net/weixin_44867717/article/details/125618132)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]