elementUi 下拉框样式修改无效或者无法修改？


先提前做个demo
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Vue 下拉框</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <script src="//i2.wp.com/unpkg.com/vue/dist/vue.js"></script>
  <script src="//i2.wp.com/unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .wrapper .el-select__tags-text {<!-- -->
      display: inline-block;
      max-width: 209px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wrapper .el-select .el-tag__close.el-icon-close {<!-- -->
      top: -7px;
    }

    .el-select-dropdown {<!-- -->
      max-width: 340px;
    }

    .el-select-dropdown__item {<!-- -->
      overflow: unset;
      text-overflow: unset;
    }

    .el-select-dropdown__list {<!-- -->
      overflow: auto;
    }

    .el-select-dropdown__item span {<!-- -->
      display: inline-block;
    }
  </style>
</head>

<body>
  <div id="app">
    <p>{<!-- -->{ message }}</p>
    <div class="wrapper">
      <el-select v-model="value" multiple filterable allow-create collapse-tags style="width: 340px;"
        default-first-option placeholder="请选择文章标签">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
          :title="item.label">
        </el-option>
      </el-select>
    </div>

  </div>
</body>

<script>
  new Vue({<!-- -->
    el: "#app",
    data: {<!-- -->
      message: "Hello Vue.js!",
      options: [
        {<!-- -->
          value: "HTML",
          label: "HTML",
        },
        {<!-- -->
          value: "CSS",
          label: "CSS",
        },
        {<!-- -->
          value: "JavaScript",
          label: "JavaScript",
        },
        {<!-- -->
          value: "name",
          label: "好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上",
        },
      ],
      value: [],
    }
  });
</script>

</html>

这种是可行的 为什么运用到项目里面就不可以了？

使用element ui和vue2.0 脚手架开发，elementUi样式修改没有效果，添加important也没用，审查元素你会发现你修改的样式根本就没在页面上面显示这是为什么呢？

众所周知，vue项目 vue页面被浏览器解析后，在标签中出现data-v-xxx标记，如下：
在这里插入图片描述
这是在标记vue文件中css时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的data-v-xxx标记。所以加了scoped，他就会匹配标签中的data-v-xxx属性

所以原因就是在这里了，给style加scoped了，但是el的元素是没有data-v-xxx的

在这里插入图片描述
所以：解决方法：

方法一: 直接写style注意不要加scoped【但这会污染全局样式】，可以用一个组件最外层的class包裹住，就不会改到所有的组件的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style lang="scss">
.logMgCls {<!-- -->
  display: inline-block;
  .el-select__tags-text {<!-- -->
    display: inline-block;
    max-width: 211px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-select .el-tag__close.el-icon-close {<!-- -->
    top: -7px;
  }

  .el-select-dropdown {<!-- -->
    max-width: 620px;
  }

  .el-select-dropdown__item {<!-- -->
    overflow: unset;
    text-overflow: unset;
  }

  .el-select-dropdown__list {<!-- -->
    overflow: auto;
  }

  .el-select-dropdown__item span {<!-- -->
    display: inline-block;
  }
}
</style>

方法二: 父组件的 scoped 样式不能穿透到子组件上 使用 vue-loader 的写法 如果希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，使用 /deep/ 或者 >>> 解决：

1
2
3
<style scoped>
    .a >>> .b {<!-- --> /* ... */ }
</style>

被编译为：

1
.a[data-v-f3f3eg9] .b {<!-- --> /* ... */ }

参考 https://segmentfault.com/q/1010000009086298