JeecgBoot table 中 图片

目录

1. 效果图

2. 生成表格

3.  修改前端页面表格列

方式一:

customRender: 

方式二:


需要在表格中显示图片:记录在表格中显示图片

1. 效果图

2. 生成表格

生成表格的方法可参考官方文档;http://doc.jeecg.com/2043915

或参考我之前的文档:https://blog.csdn.net/qq_41722795/article/details/105946973

3.  修改前端页面表格列

方式一:

需要显示图片列的代码: 数据库中该字段保存的是 图片的地址

{
            title:'头像',
            align:"center",
            dataIndex: 'headSculpture',
            customRender: function (t,r, index) {
              return <img src={t} style="width: 20px; height: 20px; border-radius: 10px;"/>

            }
          },

customRender: 

自定义渲染函数

 

方式二:

代码生成器生成的代码table 中一般 含有自带的 图片插槽模板,如果没有  手动加上即可

在需要显示图片的字段, 加入作用域插槽  scopedSlots 

 

在方法中实现图片插槽模板中的函数:

4.  图片设置可预览

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 Vue3 和 JeecgBoot 开发时,如果您想要实现操作栏固定的功能,可以尝试以下步骤: 1. 安装 element-plus 和 @vueuse/core,可以使用 npm 或 yarn 安装。 2. 在代码导入需要的组件和方法: ```javascript import { useTable, useColumns, useSortBy, usePagination } from '@vueuse/table' import { defineComponent } from 'vue' import { ElButton } from 'element-plus' ``` 3. 在组件设置表格的数据和列信息: ```javascript export default defineComponent({ setup() { const { columns, rows } = useTable( data.value, // 表格数据 useColumns(columns.value), // 表格列信息 useSortBy(), // 排序 usePagination() // 分页 ) // 定义表格列信息 const columns = ref([ { key: 'name', label: '姓名' }, { key: 'age', label: '年龄' }, { key: 'address', label: '地址' }, { key: 'action', label: '操作', actions: { view: { label: '查看', icon: 'el-icon-view', onClick: (row) => console.log(row) }, edit: { label: '编辑', icon: 'el-icon-edit', onClick: (row) => console.log(row) }, delete: { label: '删除', icon: 'el-icon-delete', onClick: (row) => console.log(row) } } } ]) return { columns, rows } } }) ``` 4. 在模板渲染表格: ```html <template> <div> <el-table :data="rows"> <el-table-column v-for="column in columns" :key="column.key" :label="column.label"> <template #default="{ row }"> <span v-if="!column.actions">{{ row[column.key] }}</span> <span v-else> <el-button v-for="(action, key) in column.actions" :key="key" :icon="action.icon" @click="action.onClick(row)" > {{ action.label }} </el-button> </span> </template> </el-table-column> </el-table> </div> </template> ``` 5. 在 CSS 设置操作栏固定: ```css .el-table__fixed-right .el-table__fixed-body-wrapper { overflow: visible; } .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body { overflow: visible; } .el-table__fixed-right .el-table__fixed-right-patch { display: none; } .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__fixed { position: sticky; right: 0; } ``` 以上步骤可以实现固定操作栏的功能,您可以根据自己的需求进行调整和修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值