【vue+a-form+字体图标展示】在form表单中加入svg字体图标列表，新增操作详解

先准备svg字体图标
在assets目录下新建icons文件夹，新建svg文件夹，把svg格式的图标都存放在这里

在utils目录下新建icons.js文件

import eventAccident from '@/assets/icons/svg/event-accident.svg'
import boardContent from '@/assets/icons/svg/board-content.svg'
import boardInfo from '@/assets/icons/svg/board-info.svg'
import eventCrossing from '@/assets/icons/svg/event-crossing.svg'
import eventNetworkInfo from '@/assets/icons/svg/event-network-info.svg'
import eventNetworkPush from '@/assets/icons/svg/event-network-push.svg'
import eventRescue from '@/assets/icons/svg/event-rescue.svg'
import gpsStake from '@/assets/icons/svg/gps-stake.svg'
import infoId from '@/assets/icons/svg/info-id.svg'
import infoTime from '@/assets/icons/svg/info-time.svg'
import infoUser from '@/assets/icons/svg/info-user.svg'
import loggingStored from '@/assets/icons/svg/logging-stored.svg'

import videoA from '@/assets/icons/svg/video-a.svg'
import videoB from '@/assets/icons/svg/video-b.svg'
import videoHDA from '@/assets/icons/svg/video-hd-a.svg'
import videoAddress from '@/assets/icons/svg/video-address.svg'
import videoArea from '@/assets/icons/svg/video-area.svg'
import videoHD from '@/assets/icons/svg/video-hd.svg'
import videoInfo from '@/assets/icons/svg/video-info.svg'
import videoRoad from '@/assets/icons/svg/video-road.svg'
import videoRoute from '@/assets/icons/svg/video-route.svg'
import videoStake from '@/assets/icons/svg/video-stake.svg'
import videoTollStation from '@/assets/icons/svg/video-toll-station.svg'
import videoUnit from '@/assets/icons/svg/video-unit.svg'
const iconsComponents = {
  'event-accident': eventAccident,
  'event-crossing': eventCrossing,
  'event-network-info': eventNetworkInfo,
  'event-network-push': eventNetworkPush,
  'event-rescue': eventRescue,
  'board-content': boardContent,
  'board-info': boardInfo,
  'gps-stake': gpsStake,
  'info-id': infoId,
  'info-time': infoTime,
  'info-user': infoUser,
  'logging-stored': loggingStored,
  'video-address': videoAddress,
  'video-area': videoArea,
  'video-hd': videoHD,
  'video-info': videoInfo,
  'video-road': videoRoad,
  'video-route': videoRoute,
  'video-stake': videoStake,
  'video-toll-station': videoTollStation,
  'video-unit': videoUnit,
  }
  const iconsLabel = [
  'event-accident',
  'event-crossing',
  'event-network-info',
  'event-network-push',
  'event-rescue',
  'board-content',
  'board-info',
  'gps-stake',
  'info-id',
  'info-time',
  'info-user',
  'logging-stored',
  'video-address',
  'video-area',
  'video-hd',
  'video-info',
  'video-road',
  'video-route',
  'video-stake',
  'video-toll-station',
  'video-unit',
  }
  export { iconsLabel, iconsComponents }

在要用到的页面引入

import { iconsLabel, iconsComponents } from '@/utils/icons'

在data中声明

data() {
    return {
      iconsLabel,
      iconsComponents,    
      form: this.$form.createForm(this),
      isSubmitting: false,
    }
  },

准备工作差不多了，现在开始是表单，只保留了和字体图标有关的item项

 <a-form class="form" :form="form">        
      <a-row class="form-row" :gutter="32">   
        <a-col :sm="24">
          <a-form-item label="xx图标">
            <ul>
              <li
                v-for="(icon, key) in iconsLabel"
                :key="key"
                :class="{ active: apiData.fVcAppIcon == icon }"
                style="text-align: center"
                @click="handleSlecteIcon(icon)"
              >
                <img style="width: 70px; height: 70px" :src="iconsComponents[icon]" />
                <br />
                {{ icon }}
              </li>
            </ul>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="operation-btn-wrapper">
        <a-button class="operation-btn" @click="cancel">取消</a-button>
        <a-button
          type="primary"
          class="operation-btn"
          :loading="isSubmitting"
          :disabled="isSubmitting"
          @click="handleSubmit"
          >保存，下一步</a-button
        >
      </div>
    </a-form>

 handleSlecteIcon(icon) {
      this.apiData.fVcAppIcon = icon    
    },
    
 handleSubmit(e) {
      e.preventDefault()
      const {
        form: { validateFields },
      } = this

      validateFields({ force: true }, (err, values) => {       
        if (!err) {
          this.isSubmitting = true
          let params = {       
            fVcAppIcon:  this.apiData.fVcAppIcon,
           （只保留了必要的参数）
          }      
          addapplySave(params)
            .then(res => {
              if (res.code === 0) {
                this.$emit('next', res.data)
              } else {
                this.requestFail(res)
              }
            })
            .catch(err => {
              this.requestFail(err)
            })
            .finally(() => {
              this.isSubmitting = false
            })
        } else {
          console.log(err, 'tijiaoerr')
        }
      })
    },
   requestFail(err) {
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || err.msg || '请求出现错误，请稍后再试',
        duration: 4,
      })
    },