点击关注了解更多精彩内容！！

 

一、 在项目中引入阿里云icon图标

1. 进入： 阿里图标官网

2. 随便选择一个图标库
   

3. 选择自己想要的图标（可以搜索）

4. 添加到购物车

5. 进入购物车，下载代码

 

6. 下载解压后只留以下五个文件，其他的都删了

7. 把上边五个文件拷贝到项目中src的assets文件下

8. 在main.js里面引入iconfont.css

9. 在iconfont.css中修改图标名字、大小和颜色

 

二、 在data中定义icon图标列表

 

三、 在下拉框中显示icon图标

<el-form-item label="触发图标" required>   <el-select clearable v-model="addruleform.icon" placeholder="请选择触发图标">     <el-option v-for="item in iconList" :key="item.value" :value="item.value">        <i :class="item.label"></i>     </el-option>   </el-select>   <span>   <i :class="this.addruleform.icon"></i>   </span></el-form-item>​

效果：

 

四、 在列表中显示icon图标

从数据库查询图标列表显示，数据库存的icon：

<el-table-column label="规则图标">  <template slot-scope="scope">     <i :class="scope.row.icon"></i>  </template></el-table-column>

 

效果：

效果：

<el-form-item> <el-form-item label="设备组" prop="topList">                <el-cascader                  size="mini"                  placeholder="关键字搜索"                  style="width:250px"                  clearable                  filterable                  :options="macGroupList"                  v-model="newMacForm.macGroupSysNoList"                  :props="defaultPropsType"                >     <template slot-scope="{ node, data }">           <span>              <i                 v-if="data.type == 1"                 style="color: #348fe2"                 class="el-icon-menu"              />              <i              v-else-if="data.type == 2"              style="color: #348fe2"              class="el-icon-s-unfold"              />              <i              v-else-if="data.type == 3"              style="color: #348fe2"              class="el-icon-s-platform"              />          </span>          <span>{{ data.macGroupName}}</span>     </template></el-cascader></el-form-item>​

 

 

————————————————

版权声明：本文为CSDN博主「⁡⁡⁡⁡⁡不三」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_45433217/article/details/106142073

戳“阅读原文”我们一起进步