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' }
  }
]

注意最后两行

 

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • net开发高级面试题2021_net面试题2021

    net开发高级面试题2021_net面试题2021文章目录1.NET/dotnetcore/.NETframework的关系2.corefx,coreclr都是什么?3.asp.netcore3.1Kestrel3.2asp.netcore主要的特性3.3startupclass的作用?3.4Startupclass的configservice方法有什么作用?3.5startupclass的configure方法有什么作用?3.6什么是metapackages?3.7什么是中间件?3.8application

    2022年8月29日
    8
  • MySQL二进制日志格式类型详解「建议收藏」

    MySQL二进制日志格式类型详解「建议收藏」mysql很多有类型的日志,按照组件划分的话,可以分为服务层日志和存储引擎层日志:-服务层日志:二进制日志、慢查日志、通用日志-存储引擎层日志:innodb(重做日志、回滚日志)其中比较重要的就是服务器层的二进制日志,其中记录了所有对mysql数据库的修改事件,包括增删改查事件和对表结构的修改事件。要注意的一点是,只有成功执行了的事件才会记录在二进制日志中,未执行成功的不会保存

    2022年6月5日
    73
  • vue父组件向子组件传值_vue什么是父子组件

    vue父组件向子组件传值_vue什么是父子组件组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习。1、父组件向子组件传值<!–父组件–><!–父组件调用子组件,看成是调用子组件函数,给子组件传值,就是给函数传参数–><template> <div> <!–传递动态值前面加个…

    2025年5月31日
    1
  • YUI3 使用总结

    YUI3 使用总结1. YUI3总体认识1.1 面向对象的JS编程,RIA工具:面向对象的JS编程,主要体现的以下几个方面:1. 继承JS有三种继承方式:javascript中继承一般分为三种方式:”类式继承”,”原型继承”,”掺元类”2. 封装:JS的Function自身就实现了对变量的封装,局部变量等。Object对性的属性也可以实现一定的封装效果3. 接口和抽象类YUI3…

    2022年7月12日
    36
  • android碎片整理工具,Android的碎片整理「建议收藏」

    android碎片整理工具,Android的碎片整理「建议收藏」Android手机与平板高级历史橡皮擦和性能的助推器★★★★第一轮中的新工具支付Android上最流行的新的生产力应用程序,下载吧!清除历史搜索,杀敌多余的电池寿命,增加单键的任务!“碎片整理免费的Andr??oid现在是十大最热AppBrain.com应用之一,现在下载”“真棒应用程序”-编辑推荐奖AppEggs.com_________________________________我们现…

    2022年6月25日
    34
  • 一文看懂TVS二极管SM8S30A

    一文看懂TVS二极管SM8S30A一文读懂TVS二极管SM8S系列,汽车抛负载防护器件随着汽车行业的大力发展,智能化、数字网络化、总线化以及节能环保成为了汽车发展的方向,然而,无论朝着哪种方向发展,汽车运用的基础电子保护防护元器件作用不容忽视,不可替代。如今,汽车电路保护的概念,早已不在局限于汽车保险丝,从仪表盘到车灯,从动力总成系统到高级驾驶辅助,个性化驾驶习惯和不确定的工作环境,都需要更高级、先进的保护措施为汽车保驾护航。电…

    2022年9月23日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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