vue 用element 做一个form表单可以选择icon图标

可以使用 Element UI 的 Icon 组件来实现在表单中选择图标的功能。以下是一个示例代码：

<template>
  <el-form>
    <el-form-item label="选择图标">
      <el-input prefix-icon="el-icon-search" v-model="searchText" placeholder="搜索图标"></el-input>
      <el-select v-model="selectedIcon" placeholder="请选择图标">
        <el-option
          v-for="icon in filteredIcons"
          :key="icon"
          :label="icon"
          :value="icon"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      selectedIcon: '',
      icons: [
        'el-icon-message',
        'el-icon-phone',
        'el-icon-user',
        // 其他图标
      ]
    };
  },
  computed: {
    filteredIcons() {
      if (this.searchText === '') {
        return this.icons;
      } else {
        return this.icons.filter(icon => icon.includes(this.searchText));
      }
    }
  }
};
</script>

在上面的示例中，我们使用了 Element UI 的 `el-input` 和 `el-select` 组件来展示搜索框和下拉选择框。通过设置 `prefix-icon` 属性，我们可以在输入框中添加一个搜索图标。使用 `v-model` 指令来实现双向绑定，将用户选择的图标保存在 `selectedIcon` 变量中。

`filteredIcons` 是一个计算属性，根据用户输入的搜索文本 `searchText` 对 `icons` 数组进行过滤，只显示包含搜索文本的图标选项。

你可以根据自己的需求调整示例代码，并根据 Element UI 的文档了解更多关于 Icon 组件和表单的用法。