elementUI中el-table组件列样式动态控制

elementUI中el-table组件动态控制列样式

需要实现效果：根据列日期值和当前日期判断显示不同的颜色，需要计算列的逻辑然后动态赋值实现列样式的动态控制。

方案1

使用 scoped slot (作用域插槽)来实现动态显示
实现效果

代码：

<el-table-column  align="center" prop="deliveryTime"  label="合同/订单履约交付日期"  min-width="180">
  <template slot-scope="scope">
    <span :style="{ background: getDateColor(scope.row.deliveryTime), color: '#000000' }">
      {{scope.row.deliveryTime}}
    </span>
  </template>
</el-table-column>


// 自定义方法来判断并返回颜色
getDateColor (dateString) {
  const date = new Date(dateString)
  const today = new Date()
  const future = new Date()
  future.setDate(future.getDate() + 15)
  if (date > future) {
    return '#00FF00' // 绿色
  } else if (today > date) {
    return '#B22222' // 红色
  } else {
    return '#FFA500' // 黄色
  }
},

方案2

使用 cell-style设置单元格样式
实现效果：

代码

<el-table
  :data="dataList" border :max-height="tableHeight"
  :height="tableHeight"
  :row-style="{height:'20px'}"
  ref="dataTable"
  :cell-style="cellStyle"
  style="width: 100%;">


// 表格列样式控制
cellStyle ({row, column, rowIndex, columnIndex}) {
  if (column.property === 'deliveryTime') {
    const date = new Date(row.deliveryTime)
    const today = new Date()
    const future = new Date()
    future.setDate(future.getDate() + 15)
    if (date > future) {
      return {
        background: '#00FF00',
        color: '#000000'}
    } else if (today > date) {
      return {
        background: '#B22222',
        color: '#000000'}
    } else {
      return {
        background: '#FFA500',
        color: '#000000'}
    }
  }
},