Ant Design Table 表格字典转换问题

Ant Design Table 表格字典转换问题

用官网的render 不知道怎么用

后面找到了这种土办法  先凑合用 等待大神提示

实现效果

Ant Design Table 表格字典转换问题

页面组件部分

<a-table :row-selection="rowSelection" :columns="columns" :data-source="sourceData" @change="hello" >
   <span slot="edit" slot-scope="edit">
       <a-tag :key="edit" @click="editFn(edit)">编辑</a-tag>
   </span>
   <span slot="status" slot-scope="status">
       <a-tag :key="status" >{
  { status==0?'否':'是' }}</a-tag>
   </span>
</a-table>

还有下面的columns数据部分

const columns = [
  {
    title: '部门',
    dataIndex: 'deptName',
    // sorter: (a, b) => a.deptName.length - b.deptName.length,
    sorter: true
    // sortDirections: ['descend']
  },
  {
    title: '代码',
    dataIndex: 'deptCode',
    // sorter: (a, b) => a.deptCode.length - b.deptCode.length,
    sorter: true
    // sortDirections: ['descend']
  },
  {
    title: '类型',
    dataIndex: 'deptType',
    // sorter: (a, b) => a.deptType.length - b.deptType.length,
    sorter: true
    // sortDirections: ['descend']
  },
  {
    title: '父节点',
    dataIndex: 'parent'
  },
  {
    title: '排序',
    dataIndex: 'sort',
    // sorter: (a, b) => a.sort - b.sort,
    sorter: true
    // sortDirections: ['descend']
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'deptId',
    scopedSlots: { customRender: 'edit' }
  }
]

注意最后两行

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2194.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • android之如何在两个activity之间传递handler_利用broadcast广播机制「建议收藏」

    这算是如何在两个activity之间传递handler的解决方案二了,解决方案一见http://blog.csdn.net/jason0539/article/details/18055259再重复一遍我遇到的问题,就是在MainActivity里面打开AnotherActivity去执行一些操作,相应的改变MainActivity里的一些布局或者执行一些动作,最开始想到的就是把MainAct

  • 单模光纤和多模光纤的型号_什么叫单模光纤和多模光纤

    单模光纤和多模光纤的型号_什么叫单模光纤和多模光纤多模光纤概念多模光纤是在给定的工作波长上传输多种模式的光纤,当光纤的几何尺寸远远大于光波波长时,光纤中会存在着几十种乃至几百种传播模式。不同的传播模式具有不同的传播速度与相位,导致长距离的传输之后会产生时延、光脉冲变宽。因此会使多模光纤的带宽变窄,降低了其传输容量,故多模光纤仅适用于较小容量的光纤通信。单模光纤概念一般v小于2.405时,光纤中就只有一个波峰通过,故称为单模光纤,它的芯子很细,约为8一10微米,模式色散很小。影响光纤传输带宽度的主要因素是各种色散,单模光纤的色散小,故能把光以很宽

    2022年10月20日
  • pycharm上如何拉git代码_pycharm版本控制

    pycharm上如何拉git代码_pycharm版本控制pycharm设置git与deployment1、创建project2、vcs创建git目录,指向project目录3、添加git远程地址4、拉取对应分支代码即可5、设置deployment5.1设置SFTP5.2配置信息5.3设置远程服务器文件地址

  • 控制台禁用js_禁止直接访问js

    控制台禁用js_禁止直接访问js主要为了通过禁止打开控制台,防止别人进行代码调试。1、禁止右键查看源码和F12//禁止F12键盘事件document.addEventListener('keydown',function(event){   return123!=event.keyCode||(event.returnValue=false)});//禁止右键、选择、复制document.addEventListener(‘'contextmen

  • 轻松理解转置卷积(transposed convolution)或反卷积(deconvolution)「建议收藏」

    轻松理解转置卷积(transposed convolution)或反卷积(deconvolution)「建议收藏」原文地址:Up-samplingwithTransposedConvolution本文暂时没有插入图像,以后修订在CNN中,转置卷积是一种上采样(up-sampling)的方法.如果你对转置卷积感到困惑,那么就来读读这篇文章吧.本文的notebook代码在Github.上采样的需要在我们使用神经网络的过程中,我们经常需要上采样(up-sampling)来提高低…

  • 阿里云部署django实现公网访问

    本博的主要目的是对阿里云部署django实现公网访问进行一次简单的记录,方便日后查询。内容目录:(1)申请阿里云服务器及安全组配置(2)实现ssh远程控制(3)实现ftp文件传输(4)安装p

    2021年12月29日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号