其他分享
首页 > 其他分享> > element 表格方法cell-style改变单元格样式

element 表格方法cell-style改变单元格样式

作者:互联网

<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