300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > element UI表格使用cell-style改变单元格样式

element UI表格使用cell-style改变单元格样式

时间:2023-06-06 17:21:39

相关推荐

element UI表格使用cell-style改变单元格样式

【例子1】

// 调用方法的部分为:<el-table:cell-style="timeStyle">// 要修改样式的部分为:<el-table-columnlabel="创建时间":formatter="startTime"width="150">// 方法:methods:// 改变表格中时间的字体样式:调小timeStyle(column) {if(column.columnIndex === 2 || column.columnIndex === 4) {return "font-size: 2px"

【例子2】

<el-table:data="testCases"stripebordersize="small"row-key="id":max-height="maxHeight"@selection-change="selectionChange"@filter-change="filterChange":cell-style="cellStyle"ref="table"><el-table-columnshow-overflow-tooltipwidth="100"label="测试结果"prop="testResult"sortable><template slot-scope="scope"><input class="custom_input" v-if="scope.row.id===idFocused" v-model="scope.row.testResult"@blur="idFocused=''" @keyup.enter="idFocused = ''"><span v-else>{{scope.row.testResult}}</span></template></el-table-column>cellStyle({row, column, rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式,成功-绿色,失败-红色,不支持-黄色let cellStyle;switch (row.testResult) {case '成功':cellStyle = 'background: green;color:white';break;case '失败':cellStyle = 'background: red;color:white';break;case '不支持':cellStyle = 'background: #aaa;color:white';break;default:cellStyle = '';}if (column.label == '测试结果')return cellStyle;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。