vue2 配合element-ui 用form表单做一个可以选择icon图标

您可以使用Element-UI提供的Icon组件来实现在Vue2中选择图标的功能。首先，您需要安装Element-UI和Vue2。然后，您可以按照以下步骤进行操作：

1. 导入所需的Element-UI组件和样式：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 在Vue组件中使用Form表单，并添加一个表单项用于选择图标：

<template>
  <el-form ref="form" :model="form" label-width="100px">
    <el-form-item label="选择图标">
      <el-input v-model="icon" placeholder="请选择图标" readonly @focus="showIconSelector"></el-input>
    </el-form-item>
  </el-form>
</template>

3. 在Vue组件的`data`中定义`icon`和`form`变量，并创建一个方法用于显示图标选择器：

export default {
  data() {
    return {
      icon: '',
      form: {
        // 其他表单项
      }
    };
  },
  methods: {
    showIconSelector() {
      // 在此处显示图标选择器的逻辑
    }
  }
}

4. 在`showIconSelector`方法中，您可以使用Element-UI提供的Dialog组件来显示一个弹窗，其中包含可供选择的图标列表：

showIconSelector() {
  this.$prompt('请选择图标', '选择图标', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    customClass: 'icon-selector-dialog',
    showClose: false,
    inputPattern: /^el-icon-[\w-]+$/,
    inputErrorMessage: '请输入正确的图标类名'
  }).then(({ value }) => {
    this.icon = value;
  });
}

注意：上述代码中的`icon-selector-dialog`是一个自定义的CSS类，您可以根据需要进行修改。

5. 最后，您可以在`showIconSelector`方法中调用一个图标选择器组件，例如[iconSelector](https://github.com/Armour/vue-icon-selector)组件，以便用户可以在弹窗中选择图标。

这样，您就可以在Vue2中使用Element-UI的Form表单实现选择图标的功能了。希望对您有所帮助！