//1. 斑马纹:el-table标签加stripe属性<el-table :data="tableData" stripe> </el-table> 3.带状态纹: //2. 带状态纹的表格:el-table标签加:row-class-name="tableRowClassName"//template:<el-table :data="tableData" :row-class-name="tableRowClassName"> </el-table>//methodstableRowClassName(...
::v-deep .el-table::before {border-bottom:1pxsolid red;height:4px; }</style> 7、💖修改表格无数据background-color,字体颜色 <stylelang="less"scoped>// 修改表格无数据背景,字体颜色 ::v-deep .el-table__empty-block {background:#16203c; } ::v-deep .el-table__empty-text {color:#ccc...
我个人推荐第二种方式,就是使用vue自带的 :style 动态绑定样式来实现,不仅可以简洁代码,而且可以实现更加丰富的效果。如下: 实现方式二 代码如下 html代码 <template> <div id="app"> <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色、蜀国黑色、吴国蓝色) --> <el-table :data="tableData"...
<el-table ref="multipleTable" border stripe :data="tableData" tooltip-effect="dark" @selection-change="selsChange" style="width: 100%;margin-top: 30px"> <el-table-column type="selection" width="70" @selection-change="selsChange"></el-table-column> <el-table-column label="序号" typ...
.el-table__header-wrapper table, .el-table__body-wrapper table{ // width:100% !important; } // .el-table__header-wrapper{ // //表头圆角处理 // // border-radius:16px; // } 这段代码注销的最重要原因是,加了width:100%,会让横向滚动条完全无法出现。 哪怕各列宽度已经超越了表格宽度,也...
若需要调整表格内数据格式可以做如下处理: <el-table-column prop="REGISTERLIMIT" label="注册总额度" width="120" align="right" class-name="col-content"> <template#default="scope"> <div style="margin-right:20px;"> {{ moneyFormatter((scope.row.REGISTERLIMIT / 100000000).toFixed(2)) }} 亿...
样式-css .hoursTable{/deep/.el-table thead.is-groupth.el-table__cell{background:none;}/deep/.el-table thead.is-grouptr:nth-child(1)>th:nth-child(1).el-table__cell{background:#F6F6F6;text-align:center;font-size:14px;font-family:PingFangSC-Regular,PingFangSC;font-weight:400;color...
解释下,el-table表示表格组件,data属性用来绑定数据列表。 el-table-column表示表格的一列,prop属性用于指定该列绑定数据列表的属性名,label是列的显示名称,width用于指定列宽度。 注意,一般最后一列的宽度我们不指定,这样的话可以自动占满剩余空间。 上述代码效果如下: ...
<el-table-column prop="name" label="姓名" width="100" align="center"> <!--列内容--> </el-table-column> </el-table> ``` 3. **行样式**: -你可以为表格的每一行设置样式,例如设置交替行的背景颜色。 ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓...