element-plus的el-icon组件

可以通过在代码中引入element-plus库来使用el-icon组件，例如：

import { ElIcon } from 'element-plus';

// 在组件中使用el-icon
<ElIcon name="el-icon-search" />

其中，name属性指定了要使用的图标名称，可以在element-plus官网的图标库中查看可用的图标名称。

相关问题

element-plus中el-icon el-tree-node__expand-icon expanded 图标没有跟着变

这可能是因为你使用了自定义的图标，而没有更新自定义图标的样式。

你可以尝试在展开和折叠节点时，手动切换图标的样式。例如：

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
    <template #default="{ node, data }">
      <span class="custom-icon" :class="{'el-icon-arrow-right': !node.expanded, 'el-icon-arrow-down': node.expanded}" v-if="!data.loading"></span>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                { label: '三级 1-1-1' },
                { label: '三级 1-1-2' }
              ]
            },
            {
              label: '二级 1-2',
              children: [
                { label: '三级 1-2-1' },
                { label: '三级 1-2-2' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data, node) {
      node.expanded = !node.expanded
      node.iconClass = node.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
    }
  }
}
</script>

<style scoped>
.custom-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center;
}
.el-icon-arrow-right:before {
  content: '\e61b';
}
.el-icon-arrow-down:before {
  content: '\e61a';
}
</style>

在这个例子中，我们使用了一个自定义的图标，并在展开和折叠节点时，手动切换图标的样式。这样可以确保图标随着节点的展开和折叠而正确地变化。

局部引入element-plus结合 el-icon 使用

在Vue.js项目中，如果你想局部引入Element Plus库并结合使用`el-icon`组件，可以按照以下步骤操作：

1. **安装Element Plus**：
首先，你需要通过npm或yarn安装Element Plus。如果你使用的是npm，可以在你的项目目录下运行：

   npm install element-plus --save

或者如果使用yarn：

   yarn add element-plus

2. **注册组件**：
在你的Vue组件的`.vue`文件或全局配置文件中（如main.js），导入需要的Element Plus，并进行Vue.use()注册：

   import { ElIcon } from 'element-plus';
   import 'element-plus/lib/theme-chalk/index.css'; // 引入主题样式

   Vue.component('ElIcon', ElIcon); // 如果是在.vue文件中
   // 或者，在全局注册：
   // Vue.prototype.$ELEMENT = {
   //   iconfontUrl: 'path/to/your/iconfont-url.svg', // 如果有自定义字体图标
   // };
   // Vue.use(ElementPlus);

3. **在模板中使用el-icon**：
现在你可以在模板里直接使用`el-icon`了，比如显示一个默认的图标：

   <template>
     <div>
       <el-icon name="el-icon-search"></el-icon> 搜索
     </div>
   </template>

这里的`name`属性可以替换为Element Plus图标库中的任何图标名称。

4. **按需引入**：
如果只想在某个特定部分使用icon组件，可以选择性地导入：

   import { ElIcon } from 'element-plus/icons'; // 导入具体的图标模块