vue3 vxe-grid 通过数据库返回的列信息,生成columns,并且其中有一列是img类型,进行slots的格式化处理。

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', // 图片高度
                //     },
                //     }),
                //     ]

下面的代码测试了,也不报错,也没有任何显示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值