element-ui 实现图标选择器

代码如下：

<el-form-item
   label='菜单图标：'
   prop='icon'
  >
   <el-popover
     placement="bottom"
     width="450"
     trigger="click"
     @show="popoverShow"
   >
    <span slot="reference">
      <el-input suffix-icon='data-icon' v-model='form.icon' placeholder='请输入'>
       <template slot="append"><i :class="form.icon"/></template>
      </el-input>
    </span>
     <div class="iconList">
       <el-tabs v-model="activeName">
         <el-tab-pane
           v-for="(item, index) in iconList"
           :key="item.label"
           :name="'name'+ index"
           :label="item.label"
         >
           <i v-for="item in item.list" :key="item" :class="item" @click="setIcon(item)"
              style="font-size:20px"></i>
         </el-tab-pane>
       </el-tabs>
     </div>
   </el-popover>
 </el-form-item>
 // 方法
   /**
     * @description 图标d窗框显示时触发
     * @author 饺子
    */
    popoverShow() {
      this.$nextTick(()=>{
        this.activeName = '0'
      })
    },
	 /**
     * @description 给icon绑定的点击事件
     * @author 饺子
     * @param { String } icon 图标
     */
    setIcon(icon) {
      this.$set(this.form, 'icon', icon)
    },
    
 // css
.icon_list {
  width: 100%;
  height: 320px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; //一定要换行
  i {
    display: inline-block;
    width: 60px;
    height: 45px;
    color: #000000;
    font-size: 20px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    margin: 5px;

    &:hover {
      color: blue;
      border-color: blue;
    }
  }

  ::v-deep .el-tabs__content {
    height: 270px;
    overflow-y: scroll; //y轴显示滚动条
    overflow-x: hidden; //x轴溢出隐藏
  }
}