Elementui 踩过的坑

select下拉框**

这个是Elementui 官网 Select选择器的基础用法，现在想要更改它本身自带的默认样式

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

更改下拉框的input 只需要获取到 .el-input-inner元素即可

但是要改下拉选项的部位，必须给标签增加popper-class 参数，如下：

<el-select popper-class="select" placeholder="请选择">
   <el-option v-for="item in items" :key="item.value" :label="item.label" :value="item.value" />
</el-select>

在控制台选中元素可以看到，加popper-class后才可以选中元素并且修改它

改变input中占位符的字体样式

使用伪元素可以改变input标签中placeholder显示的格式

    .teaching_plan ::-webkit-input-placeholder {
      font-size: 16px;
      color: #fff;
    }

使用select下拉框，点击下拉界面部分内容会出现抖动

解决： 给抖动的元素添加 position：relative；z-index:1；属性即可