使用v-for,如何将element plus图标<el-icon><Cpu/></el-icon>放入div中
时间: 2024-05-28 21:02:06 浏览: 8
您可以在 div 标签中使用 v-for 指令,然后将 element plus 图标的 HTML 代码作为字符串传递给 div 标签的 v-html 属性。示例代码如下:
<div v-for="item in items" :key="item.id">
<div v-html="'<el-icon><Cpu/></el-icon>'"></div>
</div>
当然,您需要将 items 替换为你自己的数据源,例如一个包含多个项目的数组。
相关问题
element plus 两个el-icon使用bool变量判断是否显示
在 Element Plus 中,可以使用 `el-icon` 组件来显示字体图标,可以根据 bool 变量的值来判断是否显示图标,可以在组件模板中使用 `v-if` 或 `v-show` 指令。
示例代码如下:
```html
<template>
<div>
<el-icon v-if="showIcon" name="el-icon-check"></el-icon>
<el-icon v-if="!showIcon" name="el-icon-close"></el-icon>
</div>
</template>
<script>
import { ElIcon } from 'element-plus';
export default {
components: {
ElIcon,
},
data() {
return {
showIcon: true,
};
},
};
</script>
```
在上面的示例代码中,`showIcon` 是一个 bool 类型的变量,它控制了两个图标的显示与隐藏。当 `showIcon` 的值为 `true` 时,`el-icon` 将显示 `el-icon-check` 图标;当 `showIcon` 的值为 `false` 时,`el-icon` 将显示 `el-icon-close` 图标。可以根据实际需求修改代码中的图标名称。
<template> <div> <el-card> <template> <!-- @click="showDialogHandler" --> <el-button type="primary" icon="el-icon-plus"> 添加 </el-button> </template> <el-table :data="trademarks.records"> <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="品牌名称" prop="tmName"></el-table-column> <el-table-column label="品牌LOGO" > <template v-slot="{ row }"> <img style="width: 100px" :src='row.logoUrl'/> </template> </el-table-column> <el-table-column label="操作"> <el-button type="primary" >修改</el-button> <el-button type="danger" >删除</el-button> </el-table-column> </el-table> <el-pagination style="margin-top: 20px" :page-sizes="[5, 10, 15, 20]" layout="prev,pager,next,jumper,->,sizes,total" > </el-pagination> </el-card> </div> </template> <script> import { getBaseTrademark, getBaseTrademarkbyPage, saveBaseTrademark, updateBaseTrademark, deleteBaseTrademark, } from "@/api/trademark"; export default { name: "ProductTrademark", data() { return { trademarks: "", }; }, methods: { async getList() { let result = await getBaseTrademarkbyPage(); console.log(result); this.trademarks = result.data; }, }, mounted() { this.getList(); }, }; </script> <style lang="less" scoped> </style>
这是一段 Vue.js 的代码,用于展示商标管理的列表和分页功能。其中使用了 Element UI 组件库,通过调用相关接口,从后端获取商标数据并展示出来。如果需要添加、修改或删除商标信息,还需要调用相应的接口进行操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)