项目中正确使用element-plus的icons图标的办法

一、导入组件

import {DeleteFilled} from '@element-plus/icons-vue'

二、实例中添加组件  或者在data中添加变量

components:{
    DeleteFilled
  },

 或

data() {
    return {
      Search:Search
      
    }

三、项目中使用

1、添加到组件中引用方式

 <div style=" width: 1.5em; height: 1.5em;padding: 8px 0;color: #ff0000;float: right;" >
          <DeleteFilled   @click="deleteRole(r)"> </DeleteFilled>
 </div>

2、添加到data中的引用方式（直接显示图标）

 <el-input v-model="keywords" placeholder="通过用户名搜索用户..." :prefix-icon="Search"
                style="width: 400px;margin-right: 10px" @keydown.enter.native="doSearch"></el-input>

四、在输入框中添加图标方法

采用组件方式显示图标

 <el-input
        placeholder="请输入部门名称进行搜索..."
        :prefix-icon="Search"
        v-model="filterText">
      <template #prefix >
        <el-icon style="align-self: center;font-size: 16px;color: #409eff">
          <Search />
        </el-icon>
      </template>
   </el-input>

导入多少根据使用的情况，也可以在mian.js中全局注册导入，这里不再赘述。