<el-table-column :label="item.label" :prop="item.prop" align="center"> <template slot-scope="scope"> <el-image style="width: 50px; height: 50px" :src="scope.row.goodimg" ></el-image> </template> </el-table-column>这段代码中如何将goodimg给替换成通用不管外面传的是userimg或者是goodimg都能使用
时间: 2024-03-03 18:49:47 浏览: 40
如果要将 `goodimg` 替换成通用的属性,可以使用动态绑定的方式来实现。具体做法是在 `:src` 绑定的时候,先判断 `scope.row` 对象中是否存在 `goodimg` 属性,如果存在就使用 `goodimg` 属性,否则就使用 `userimg` 属性。修改后的代码如下:
```
<el-table-column :label="item.label" :prop="item.prop" align="center">
<template slot-scope="scope">
<el-image style="width: 50px; height: 50px" :src="scope.row.goodimg ? scope.row.goodimg : scope.row.userimg"></el-image>
</template>
</el-table-column>
```
这样就可以通用地显示不同表格中的图片属性了,不管外面传的是 `goodimg` 还是 `userimg` 都能够使用。
相关问题
<template v-if="item['type'] === 'img'"> <el-table-column :label="item.label" :prop="item.prop" align="center"> <template slot-scope="scope"> <el-image style="width: 50px; height: 50px" :src="scope.row.gooid" ></el-image> </template> </el-table-column> </template>这段代码中如何将goodid给替换成通用的id
在这段代码中,`scope.row.gooid` 表示当前行的 `gooid` 属性,如果要将其替换成通用的 `id` 属性,只需要将 `:src="scope.row.gooid"` 改成 `:src="scope.row.id"` 即可。修改后的代码如下:
```
<template v-if="item['type'] === 'img'">
<el-table-column :label="item.label" :prop="item.prop" align="center">
<template slot-scope="scope">
<el-image style="width: 50px; height: 50px" :src="scope.row.id"></el-image>
</template>
</el-table-column>
</template>
```
这样就可以通用地显示不同表格中的 `id` 属性了。
修改一下代码,是否补加日期选是时,才显示补加日期:<el-table-column label="是否补加日期" align="center" prop="isDatepath"> <template slot-scope="scope"> <dict-tag :options="dict.type.jsyh_yes_no" :value="scope.row.isDatepath"/> </template> </el-table-column> <el-table-column label="补加日期" align="center" prop="datepath" />
可以在模板中添加一个 v-if 条件语句来判断是否需要显示“补加日期”列。具体代码如下:
```html
<el-table-column label="是否补加日期" align="center" prop="isDatepath">
<template slot-scope="scope">
<dict-tag :options="dict.type.jsyh_yes_no" :value="scope.row.isDatepath" />
</template>
</el-table-column>
<el-table-column label="补加日期" align="center" prop="datepath" v-if="tableData.some(item => item.isDatepath === '是')" />
```
这里用了 `tableData.some` 方法判断是否有任意一行数据的 isDatepath 属性为“是”,如果有,则显示“补加日期”列。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)