table 格式化数据 formatter
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
vue3 代码
const conInited = () => {
columns.forEach((column) => {
//修改颜色
if (column.field == '字段') {
//格式化返回自定义单元格内容
column.formatter = (row) => {
return '<span style="color: #2d8cf0;">' + row.字段 + '</span>'
}
//单元格绑定事件,如果需要多个按钮或者点击事件，见上面自定义按钮示例
column.click = (row, column, event) => {
this.$message.info(row.字段);
};
}
//格式化日期
if (column.field == 'CreateDate') {
column.formatter = (row) => {
return (row.CreateDate || '').split(' ')[0].replace(/-/g, '.')
}
}
});
//明细表格式化配置同上
// detail.Columns.forEach((x) => {
// //操作同上
// });
};
vue2 代码
onInited() {
this.columns.forEach(column => {
//修改颜色
if (column.field == '字段') {
//格式化返回自定义单元格内容
column.formatter = (row) => {
return '<span style="color: #2d8cf0;">' + row.字段 + '</span>'
}
//单元格绑定事件,如果需要多个按钮或者点击事件，见上面自定义按钮示例
column.click = (row, column, event) => {
this.$message.info(row.字段);
};
}
//格式化日期
if (column.field == 'CreateDate') {
column.formatter = (row) => {
return (row.CreateDate || '').split(' ')[0].replace(/-/g, '.')
}
}
})
//明细表格式化配置同上
//this.detailOptions.columns.forEach
}