Vue中style在scope模式下修改ElementUI原生样式

Vue中不可修改ElementUI默认样式

 Vue-Cli中style标签默认都是带有scoped属性的

<style scoped> </style>

在scoped模式下只可修改当前文件中的样式，也就相当于一个局部作用域

可去掉scoped属性 //慎用

前提条件必须确保每个文件外层都有不同的类名，定义css选择器必须写完整的选择器路径，否者将会有修改全局样式的风险

<template> <div id="test"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <style> #test>.el-table thead tr th{ background:#f00; }

使用/deep/深度选择器

/deep/选择器可以在不影响全局的情况下直接穿透scoped，直接去修改默认样式，使用/deep/选择器时，为保证语法正确需在最外层包裹父元素，否则虽可使用但是会造成语法错误

<template> <div id="test"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table> </div> </template> <style scoped> #test /deep/.el-table thead tr th{ background:#f00; }