在el-input中可以通过 prefix-icon(首部)
和 suffix-icon(尾部)
属性在 input 组件增加显示图标,也可以通过 slot 来放置图标。如下图:
代码如下:
<div class="demo-input-suffix"> 属性方式: <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"> </el-input> <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"> </el-input> </div> <div class="demo-input-suffix"> slot 方式: <el-input placeholder="请选择日期" v-model="input3"> <i slot="suffix" class="el-input__icon el-icon-date"></i> </el-input> <el-input placeholder="请输入内容" v-model="input4"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input> </div> <script> export default { data() { return { input1: '', input2: '', input3: '', input4: '' } } } </script>
在el-select中没有该属性,则直接使用slot替换,如下图:
<template slot="menuLeft"> <el-select v-model="deviceDataId" filterable size="small" @visible-change="deviceVisibleChange" @change="deviceSelectChange" placeholder="请选择设备生成图表"> <template slot="prefix"> <span style="padding: 5px;line-height: 33px;font-size: 18px; color: #409eff;"> <i class="el-icon-s-data"></i> </span> </template> <el-option v-for="item in devOptions" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId"> </el-option> </el-select> </template>
如果使用的是element-plus,则用 <template #prefix> 来替换插槽
<el-select v-model="deviceDataId" filterable size="small" @visible-change="deviceVisibleChange" @change="deviceSelectChange" placeholder="请选择设备生成图表"> <template #prefix> <span style="padding-left: 5px;"> <i class="el-icon-suitcase"></i> </span> </template> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select>标签:slot,el,控件,element,input,icon,select,图标 From: https://www.cnblogs.com/luckybaby519/p/16776534.html