记录Ant-Vue-table中customCell改变单元格样式
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
写项目过程中,遇到一样一个需求:
看了官方文档的用法,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 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)