首页 > 其他分享 >在element-ui控件el-select与el-input中前面添加icon图标

在element-ui控件el-select与el-input中前面添加icon图标

时间:2022-10-10 17:44:21浏览次数:52  
标签:slot el 控件 element input icon select 图标

 

在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

相关文章

  • 软件整理:Webshell管理神器
    ​1、“中国菜刀”Webshell管理神器https://share.weiyun.com/Lng1zyzI2、冰蝎Webshell管理神器https://share.weiyun.com/B751jn9o3、哥斯拉Webshell管理神器https://share......
  • shell
    管理整个计算机硬件是内核(kernel)和操作系统。shell是Linux系统的用户界面,提供了用户与内核进行交互操作的一种接口。它负责接收并解释用户输入的命令后送入内核执行。比如W......
  • 华为设备配置telnet远程登陆命令
    user-interfacevty04进入0~4前五个的VTY用户界面进行整体配置authentication-modepassword设置验证方式为密码userprivilegelevel3设置用户登陆级别aaa进入a......
  • 华为设备配置Stelnet命令
    配置SSHserver:rsalocal-key-paircreate生成本地RSA主机密钥对displayrsalocal-key-pairpublic查看本地密钥对中的公钥信息user-interfacevty04进入VTY用户视......
  • 辐射图中的仰角和方位角-Elevation and Azimuth in Radiation Patterns
    前言在辐射图中有时候会用到两个方位术语:仰角(Elevation)和方位角(Azimuth),这里介绍下什么意思。方位角(Azimuth)指的是罗盘方位,假设有一个圆形的空间。那么在XY平面上,就可......
  • pipeline 具体化操作
    1.添加参数   2.生成流水线语法。  3.放入gitlab中的 jenkinsfile  4.使用mvn编译pipeline工程。    5.把上述流水线语法添加到gitlab......
  • 巧用VBA实现:基于多个关键词模糊匹配Excel多行数据
    在用Excel处理实际业务中,我们会碰到如下场景:1、从一堆人名中找到包含某些关键字的名字;2、从银行流水文件中根据【备注】字段找到包含某些关键字的,统一识别为......
  • Native如何使用Tunnel Mode
    mAudioSessionId=AudioSystem::newAudioUniqueId(AUDIO_UNIQUE_ID_USE_SESSION);mHwSync=AudioSystem::getAudioHwSyncForSession((audio_session_t)mAudio......
  • 《Antenna Selection Guide》阅读笔记(三):天线参数
    5天线参数-AntennaParameters在为无线设备选择天线时,需要考虑的一些重要的事情有:辐射如何在天线周围的不同方向上变化、天线的效率如何、天线具有期望性能时的带宽多大......
  • Java 我的第一个hello word
         项目—右键—选中添加框架的支持 选中“WebApplication”,然后确定  右键src,新建一个类          ......