react ant table 根据接口动态渲染表头

这篇具有很好参考价值的文章主要介绍了react ant table 根据接口动态渲染表头。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使request获取list,renderFormItem回调里面第二个参数中就有request的返回值,根据这个去渲染就可以了文章来源地址https://www.toymoban.com/news/detail-570437.html

{
      title: '版本',
      dataIndex: 'version',
      hideInTable: true,
      renderFormItem: (a,b:any) => {
        return (
           <>
            {version}(状态:{b.options?b.options.filter((item: { value: string; })=>item.value===status)[0]?.label:''}</>
        );
      },
      request: async () => {
        const res = await getDataDictionary('Approved_status')
        return res.map((i) => ({
          value: i.value,
          label: i.label,
        }));
      }
},
 

到了这里,关于react ant table 根据接口动态渲染表头的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue element table 懒加载 根据滚动条滑动动态加载数据 无分页或分页过大 渲染慢问题

    实现思路:先加载一开始会在页面上显示的数据,比如页面能显示20条数据,就先加载20条,剩下的数据监听滚动条,滚动条到底部再加载。 1.在data()中定义三个属性,分别存储数据指针、表格显示的数据和接口中获取的所有数据。 2.从接口获取数据,并添加最初20条到tableD

    2024年02月15日
    浏览(39)
  • Vue 3 中 Ant Design Vue 如何自定义表格 Table 的表头(列头)内容?

    项目用到的是 Ant Design Vue (2.2.8) 组件库,开发中遇到一个如下图的表格,有些表头文本后面会有一些自定义图标,鼠标移入图标时显示对应的审批时间提示。当前列如果没有审批时间就会隐藏图标,只展示列头文本。 使用 Ant Design Vue 基础的 Table 组件是无法满足这个场景的

    2024年02月16日
    浏览(43)
  • react+antd,Table表头文字颜色设置

    1、创建一个自定义的TableHeaderCell组件,并设置其样式为红色 2、将CustomTableHeaderCell组件传递到Table组件的columns属性中的title属性中: 3、将数据源(dataSource)、列配置(columns)等相关信息传递给Table组件

    2024年01月18日
    浏览(55)
  • 为React Ant-Design Table增加字段设置

    最近做的几个项目经常遇到这样的需求,要在表格上增加一个自定义表格字段设置的功能。就是用户可以自己控制那些列需要展示。 在几个项目里都实现了一遍,每个项目的需求又都有点儿不一样,迭代了很多版,所以抽时间把这个功能封装了个组件:@silverage/table-custom,将

    2024年02月05日
    浏览(57)
  • React 基于Ant Degisn 实现table表格列表拖拽排序

     代码:

    2024年01月18日
    浏览(42)
  • ant-design-vue中table组件使用customRender渲染v-html

    ant-design-vue遇到table中列表数据需要高亮渲染 1、customRender可以使用,但是使用v-html发现不生效还报错 2、customRender函数返回肯定是jsx语法,于是发现这样写可以

    2024年02月15日
    浏览(50)
  • 【JSON渲染工具】Element UI动态生成表格,多行表头,自定义表头合并

    table :中每个对象代表一张表格; table_header :表示表格表头数据; headerColor :表示表格表头背景颜色; headerData :表示表格表头内容数据; prop :值为与 table_content 中对象属性对应,data_list中的avgMen对应的prop需为\\\"first.avgMen\\\"(这里跟获取对象的点语法相似),如以下例子 label

    2024年04月10日
    浏览(53)
  • vue的h渲染函数和customRender在ant design vue的table组件的使用

    使用ant design vue 的table组件,没有使用插槽的情况下,我想你给我使用tooltip,这样子我就不用又写插槽又写html结构了 因为我们使用table组件,想自定义结构,一般是先使用插槽,然后插槽填写内容,比如下面做法 这个时候我们可以使用组件列表 columns 说明的 customRender 属性来简化这一

    2024年02月13日
    浏览(46)
  • ant vue table表格数据动态合并

    antd 表格动态行合并 合并效果 步骤方法 1.在computed节点下动态计算每次要合并的行数 2.在methods节点下定义合并单元格的方法 3.如果是一次性获取所有数据进行分页的话,计算columns的时候需要进行修改一下 参考文章:ant design vue 动态表格合并 合并效果 如果我们想要实现名称

    2024年02月10日
    浏览(44)
  • 前端-layui动态渲染表格行列与复杂表头合并

    说在前面: 最近一直在用layui处理表格 写的有些代码感觉还挺有用的,顺便记录下来方便以后查看使用; HTML处代码 拿到id 渲染位置表格 CSS 重点来了 JS代码 合并表头需要在 cols中传入[ [ ],[ ] ]这种数组类型的格式; 主要就是不合并的表头都加上rowspan:2(代表行跨度为2) c

    2024年02月07日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包