el‐icon - daniel-qa/Vue GitHub Wiki

el-icon

#

  • 直接在 标签内部嵌套图标组件(如 < ArrowRight />
<template>
  <div>
    <el-button type="primary" @click="onClick">
      <el-icon>
        <ArrowRight />
      </el-icon>
      下一步
    </el-button>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue';

function onClick() {
  console.log('按钮点击了');
}
</script>

  • 在按钮中插入图标
<template>
  <div>
    <el-button type="primary" icon="Search" @click="onSearch">
      搜索
    </el-button>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';

function onSearch() {
  console.log('搜索按钮被点击');
}
</script>

常用

  • 移除
CloseBold  : (打 X )
Plus       : (加號 + )
<el-button size="small" @click="removeSchool(index)">
	<el-icon>
		<CloseBold />
	</el-icon>
</el-button>
function removeSchool(index) {
  showData.value.splice(index, 1); // 移除指定索引的学校
  console.log('移除学校:', index);
}
⚠️ **GitHub.com Fallback** ⚠️