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

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

时间:2024-09-27 15:18:42浏览次数:13  
标签:default 格式化 img vxe fields item grid slots row

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

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

标签:default,格式化,img,vxe,fields,item,grid,slots,row
From: https://blog.csdn.net/jwbabc/article/details/142457246

相关文章

  • DevExpress WinForms中文教程:Data Grid - 如何添加或删除行?
    本教程介绍DevExpressWinForm的DataGrid控件UI元素和API,它们使您和最终用户能够添加或删除数据行。您将首选学习如何启用内置的数据导航器,然后学习如何使用MicrosoftOutlook启发的NewItem行添加新记录。最后教程将向您展示基本的API,它使您能够添加或删除行,并在最终用户使用网......
  • vue-grid-layout详解
    vue-grid-layout教程vue-grid-layout是一个用于Vue.js的响应式拖放网格布局组件,允许开发者创建可调整大小、可拖放的布局,广泛用于仪表板、管理面板等复杂布局需求。本教程将介绍如何安装、配置和使用vue-grid-layout。目录安装基本使用布局设置拖拽和调整大小高级使用响应式布......
  • 淘宝商品详情接口item_get响应参数解析:props、props_list、prop_img
    在电商数据分析和应用开发中,淘宝商品详情接口item_get是一个至关重要的工具。通过该接口,开发者可以高效地获取淘宝平台商品的详细信息,从而优化商品展示、搜索、推荐等功能,提升用户体验和转化率。本文将详细解析item_get接口的响应参数,帮助开发者更好地理解和使用该接口。一、......
  • DataGridView DataGridViewCheckBoxColumn 实现禁用效果,因为默认的不带禁用效果
    ///<summary>///DataGridViewDisableCheckBoxColumn///自定义disablecheckbox列实现禁用效果///</summary>publicclassDataGridViewDisableCheckBoxColumn:DataGridViewCheckBoxColumn{publicDataGridViewDisableCheckBoxColumn(){this.......
  • WPF DataGrid RowDetailsTemplate RowDetailsVisibilityMode="VisibleWhenSelected"
    <Grid><DataGridItemsSource="{StaticResourcebooksData}"EnableColumnVirtualization="True"EnableRowVirtualization="True"RowDetailsVisibilityMode="VisibleWhen......
  • WPF DataGrid FrozenColumnCount="2" AreRowDetailsFrozen="True" RowDetailsVisibili
    <DataGridItemsSource="{StaticResourcebooksData}"EnableColumnVirtualization="True"EnableRowVirtualization="True"FrozenColumnCount="2"AreRowDetailsFrozen="Tru......
  • WPF datagrid ClipboardCopyMode="IncludeHeader"
    <DataGridItemsSource="{StaticResourcebooksData}"ClipboardCopyMode="IncludeHeader"/>       //xaml<Windowx:Class="WpfApp398.MainWindow"xmlns="http://schemas.microsoft.com/winfx/......
  • GridFS
     1.概述如果文件大小超过16MB的BSON文档大小限制,可以使用GridFS来存储和检索。GridFS不将文件存储在一个文档中,而是大型数据进行分块处理,然后将这些切分后的小文档保存在数据库中。 2.GridFS的工作原理GridFS在存储桶中组织文件,存储桶是一组包含文件块和描述性信......
  • WPF DataGrid DataGridTextColumn,DataGridCheckBoxColumn,DataGridComboBoxColumn,Da
    <Windowx:Class="WpfApp397.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft......
  • WPF DataGrid DataGridTextColumn DataGridCheckBoxColumn DataGridCheckBoxColumn Da
    <Windowx:Class="WpfApp397.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft......