Element-ui 是后端最流行的 UI 框架之一。 使用Vue脚手架开发，功能非常强大。 下面我介绍一下如何在element-ui中实现表格的自定义颜色。 与往年的HTML结果不同。 Element - ui中用到的所有东西都是组件封装的，所以不能像传统的操作方式那样直接操作dom（可以操作，而且很冗长）。 虽然，在element-ui框架中，提供了表格操作。 可以调用一些技术来控制表格的自定义颜色。 同时我们也可以通过在element-ui中直接控制table的类名来直接操作dom。 接下来elementui列表颜色间隔，我们将带您进入实战：
如右图所示：
这些效果是使用 element-ui 中的 table 组件制作的。 我们来解释一下如何在element-ui中自定义表格颜色。
一、上传代码【完整代码是可以直接复制到脚手架页面打开看效果的！ 】：
样式=“宽度：100％；颜色：#49494a；”
ref="多个表"
:row-class-name="tableRowClassName"
:header-cell-style="getRowClass">
类型=“选择”>
{{范围.行.a}}
{{范围.行.b}}
{{范围.行.g}}
查看报告
样式=“padding-left：25px；”
@click="打印(scope.$index,scope.row)">复制报告
。桌子{
宽度：900px；
高度：400px；
边距：100px自动；
/*修改表格颜色*/
。双倍的{
背景：#f6f6f6！重要；
。单身的{
背景：#ccc！重要；
导出默认值{
姓名：''，
数据（）{
返回{
表数据：[{
a:'张三',
b:'男',
克：'45'，
},{
a:'张三',
b:'男',
克：'45'，
},{
a:'张三',
b:'男',
克：'45'，
},{
a:'张三',
b:'男',
克：'45'，
},{
a:'张三',
b:'男',
克：'45'，
},{
a:'张三',
b:'男',
克：'45'，
},{
a:'张三',
b:'男',
克：'45'，
},{
a:'张三',
b:'男',
克：'45'，
}],
}},
方法：{
表行类名({行,行索引}){
if((rowIndex+1)%2===0){
返回“双”；
}别的{
return '单身';
},getRowClass({rowIndex}){
如果（行索引==0）{
返回'背景：#ebeaef'
}别的{
返回''
},
如何在element-ui中自定义表格颜色看起来很简单。 细心的朋友可能已经发现，这里使用了两种方法。 一种方法控制表行的颜色。 一是用来控制腹部的颜色。 rowIndex的下标为0，表示第一个，所以可以设置第一个的颜色。
那是：
如何在element-ui中自定义表格颜色 - 核心代码：
//控制行颜色
表行类名({行,行索引}){
if((rowIndex+1)%2===0){
return 'double';//对应的类
}别的{
return'single';//对应的类
},
//控制桌子背面的颜色
getRowClass({rowIndex}){
如果（行索引==0）{
返回'背景：#ebeaef'
}别的{
返回''
/*修改表格颜色*/这里是对应的CSS样式（类样式）
。双倍的{
背景：#f6f6f6！重要；
。单身的{
背景：#ccc！重要；
值得注意的是，由于级别问题，必须添加important。 因为在element-ui框架中，样式的层级较多，权重也比较大elementui列表颜色间隔，所以使用element-ui将层级提升到最大是有效的。 还需要注意的是，style样式是全局的，不能限定作用域（这意味着它只在当前主题样式中有效）。 它出现后，这段代码将会被element-ui样式所取代。 恐怕应该是我自己写的css代码。 先执行，再执行element-ui代码。 这种情况下，如果不是全局样式，则不会生效。 有朋友又会问，这样的话，其他有表格的页面的表格颜色不就和当前的一样了吗？ 表格页面都是一样的，所以为了防止这些问题，我们可以给当前页面添加一个唯一的类名，然后使用这个类名后面的样式。
代码如下：
//htm结构
……
//css样式
.table_bg.double{
背景：#f6f6f6！重要；
.table_bg.single{
背景：#ccc！重要；
这完全避免了冲突。
上面的完整代码也可以直接复制，直接在vue脚手架环境中运行。
