vue3 vxe-grid 通过数据库返回的列信息,生成columns,并且其中有一列是img类型,进行slots的格式化处理。
vxe-grid,从数据库返回动态的图片列的格式化处理。
·
1、一般我们写死的列信息的时候,会这样定义:
2、然后我们在template里面,这样这样写slots格式化部分:
这样表格中就会展示出一张图片,并且,我们点击了可以查看大图。
3、那么我们从数据库中返回的列,应该如何去写:
let fields = {
field: item.fieldname,
title: item.fielddesc,
width: item.fieldwidth,
showOverflow: 'tooltip',
align: item.fieldalign,
sortable: Boolean(item.columnsorted),
};
fields.slots = {
default: 'picdisabledSlot',
}
4、对于格式化日期的部分:
fields.slots = {
default: ({ row }) => {
let fieldvalue = row[item.fieldname];
return dayjs(fieldvalue).format('YYYY-MM-DD');
}
}
这样就可以了,之前测试过,通过jsx来编写,发现不行,返回一个string是可以的。
// default: ({ row }) => {
// return [
// h('Image', {
// attrs: {
// src: row.bg, // 替换为你的图片路径
// width: '50', // 图片宽度
// height: '50', // 图片高度
// },
// }),
// ]
下面的代码测试了,也不报错,也没有任何显示。
更多推荐
已为社区贡献2条内容
所有评论(0)