The use of iconfont icons in Vue

It just so happens that the project needs to use an iconfont icon, so record the process

1. Iconfont-Alibaba vector icon library  This registers an account for subsequent use when downloading codes

2. Find the icon you need

  I mainly look for two icons, a plus sign and a minus sign, and add them to the shopping cart

 3. Click the shopping cart

4. Add items

 

5. After entering the project, make project settings, tick the following

 

 6. Generate code and use font class

 7. Download and decompress

 8. Copy the above checked file to @assets of your vue project, as follows

 9. Add css to main.js

import '@/assets/styles/iconfont/iconfont.css'

10. This can be used in actual projects

As follows, use the plus and minus signs of the tree, of course this is an example:

<el-table :data="data" border style="width: 100%" :row-style="showTr" highlight-current-row @selection-change="selsChange" :style="tableMaxHeight">
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" align="left">
      <template slot-scope="scope">
        <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
        <span v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
          <i v-if="!scope.row._expanded" class="iconfont icon-jiahao" aria-hidden="true"></i>
          <i v-if="scope.row._expanded" class="iconfont icon-jianshao" aria-hidden="true"></i>
        </span>
        <span v-else-if="index===0" class="ms-tree-space"></span>
        <span v-html="scope.row[column.dataIndex]"></span>
      </template>
    </el-table-column>
    <slot></slot>
    
  </el-table>

11. The renderings are as follows: