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脚手架环境中运行。