标签:style column 单元格 cellStyle element cell color row
<el-table :cell-style="timeStyle" > // 修改样式的部分为: <el-table-column label="创建时间" :formatter="startTime" width="150"> // 方法: methods:{ // 改变表格中时间的字体样式:调小 timeStyle(column) { if(column.columnIndex === 2 || column.columnIndex === 4) { return {"font-size": "2px","color":"red"}
}
cell-class-name 和 cell-style 绑定的方法都是可以获取 Function({row, column, rowIndex, columnIndex}) ,官方文档明确表示cell-style 要返回一个对象形式的class样式,class-name方法可以是一个字符串形式,只是大多数情况下,cell-style 如果返回一个字符串也可以生效<el-table :data="testCases" stripe
border size="small" row-key="id" :max-height="maxHeight" @selection-change="selectionChange" @filter-change="filterChange" :cell-style="cellStyle" ref="table"> <el-table-column show-overflow-tooltip width="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>
<el-table/>
method:{
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; }
}
标签:style,column,单元格,cellStyle,element,cell,color,row 来源: https://www.cnblogs.com/qianduan-lucky/p/15858912.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。