一、 在项目中引入阿里云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-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>