Vue项目中使用element-plus UI库-并对下拉搜索框样式修改

原创

JackieDYH 2023-09-16 08:29:53 博主文章分类：Vue ©著作权

©著作权归作者所有：来自51CTO博客作者JackieDYH的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue项目中使用element-plus UI库-并对下拉搜索框样式修改_搜索

安装element-plus

npm install element-plus --save

在main.js文件中引入element-plus

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

在需要使用下拉搜索框的组件中使用el-select和el-option

<template>
  <el-select v-model="selected" filterable remote default-first-option @remote-method="search" clearable>
    <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item"></el-option>
  </el-select>
</template>

<script>
export default {
  data () {
    return {
      options: [],
      selected: ''
    }
  },
  methods: {
    search (query) {
      // 请求后台数据
      this.options = ['option1', 'option2', 'option3']
    }
  }
}
</script>

<style>
/* 修改下拉框的边框和宽度 */
.el-select {
  width: 200px !important;
  border: 1px solid #ccc !important;
}

/* 去除下拉框的阴影效果 */
.el-select-dropdown {
  box-shadow: none !important;
}

/* 修改下拉框选中项的背景色 */
.el-select-dropdown .el-select-dropdown__item.selected {
  background-color: #e8f6fe !important;
}
</style>

说明：