写项目过程中,遇到一样一个需求:
在这里插入图片描述
看了官方文档的用法,customRow好用,customCell怎么都不好用,后来找了好久,才找到解决办法。

customRow 用法
在这里插入图片描述
customCell 用法

首先在html中引入,把customCell绑定自己自定义的一个方法cellStyle。

 <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" :customCell="cellStyle"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
        @change="handleTableChange">

在columns中需要的那一列定义customCell

const columns = [
...
{ 
  title: '时间(s)',
  dataIndex: 'time', 
  key:'time',
  align: "center", 
  width: 100, 
  customCell:this.cellStyle
},
...
]

在methods中定义cellStyle()方法

methods: {
    // 判断日期并加背景色
    // 单元格样式函数
    cellStyle(row, column) {
      // console.log("单元格样式函数" + JSON.stringify(row), column)
      var cell = JSON.stringify(row)

      var date = new Date()
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = (month > 9) ? month : ('0' + month);
      day = (day < 10) ? ('0' + day) : day;
      var today = year + '-' + month + '-' + day;
      console.log("单元格样式函数" + row.nextAssessDate, today)

      if (row.nextAssessDate < today) {
        return {
          style: {
            'background-color': 'red',
          }
        }
      }
    },

最后实现的效果,不符合条件的被标红
在这里插入图片描述

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐