vue在列表和下拉框中显示icon图标

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

1. 进入： 阿里图标官网

2. 随便选择一个图标库
   

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

4. 添加到购物车

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

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

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

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

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

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

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

"触发图标" required>
   "addruleform.icon" placeholder="请选择触发图标">
     "item in iconList" :key="item.value" :value="item.value">
        <i :class="item.label">
     
   
   
   <i :class="this.addruleform.icon">
   

效果：

四、 在列表中显示icon图标

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

"规则图标">
  

效果：

五、 在el-cascader中显示icon图标

<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>