<el-table-column type="index" label="序号" width="80"> </el-table-column> <el-table-column type="selection" width="50"> </el-table-column> <el-table-column prop="date" label="日期" width="220"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> <...
tableRowClassName(row, rowIndex ) {if(row.row.name == 'test') {return'rowColor'}return''}, style中设置class属性: ::v-deep .el-table .rowColor{background:#f3c298; } 2、置好背景色后发现,每次鼠标移入到变色的行上面,背景色就会变成灰色,要求是移入后也应该是变过色的背景色 tableCellstyl...
el-table点击行,改变行的背景色 为了防止污染自组件的table,row,可以在::v-deep{}外层再加一个class ::v-deep {.current-row{td{background-color:rgba(0,191,255, .35)!important; } } } https://blog.csdn.net/LH2HA3/article/details/127888560...
2、选中行设置颜色 <el-table:row-style="rowClass"></el-table>data(){return:{selectRow:[],}},watch(){multipleSelection(data){this.selectRow=[];if(data.length>0){data.forEach((element)=>{this.selectRow.push(this.listData.indexOf(element));});}},}methods:{rowClass({row,rowIndex})...
</el-table> ``` 在上面的示例中,通过style属性设置了整个表格的背景颜色。你可以根据需要调整颜色值来定义你想要的行颜色。 如果你想为特定的行设置颜色,你可以使用CSS选择器来选择特定的行,并为其应用样式。以下是一个使用CSS选择器的示例: ```html <style> .my-row { background-color: #f5f5f5; } ...
handleRowClick(row, column, event) {//点击行触发,选中或不选中复选框 this.$refs.refTable.toggleRowSelection(row); }, tableRowClassName({ row, rowIndex }) {//改变某行的背景色 if (row.date == "2016-05-04" ) { return "freeze"; ...
[element-ui] el-table点击高亮当前行 1、highlight-current-row tr.current-row > td, .el-table__body tr:hover > td { background: #f5f5f5; } 1. 2. 3. 4. 2、:row-class-name=“tableRowClassName”,需要借助@row-click="handleRowClick"获取当前点击行的下标...
1 打开一个vue文件,插入一个el-table的组件,然后设置表格显示内容为日期、姓名、地址。如图 2 在el-table标签上添加row-class-name属性,设置值为tableRowClassName。如图 3 设置tableRowClassName方法返回一个隔行背景色为浅黄色的yellow类。如图 4 使用css设置表格orange的背景色为浅黄色。如图 5 保存vue文件后...
<el-table-column label="操作" align="center" min-width="100px"> <template slot-scope="scope"> <el-button type="info" icon="el-icon-message" @click="checkDetail(scope.row)" circle></el-button> <el-button type="primary" icon="el-icon-edit" @click="modifyData(scope.row)" circle...
主要实现的原理是利用每行的下标来实现单,偶区分,添加不同的样式 <el-table :data="tableData" fit :row-class-name="tableRowClassName"> <el-table-column type="index" label="序号"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> ...