ant design vue 使用小结

news/2025/1/16 1:34:13/
a-table
columns配置

常见三种方式

1.直接回显dataIndex就是参数名

2.customRender 对值进行简单的处理

3.scopedSlots 对值进行复杂处理获取操作列表

javascript">               {title: '利率',dataIndex: 'customerPrice',customRender: (text) => text * 100 + '%'},{title: '授权到期时间',dataIndex: 'authEndTime'},{title: '融资状态',dataIndex: 'canFinance',scopedSlots: { customRender: 'canFinanceStatus' }},
  • text:通常是指当前插槽所代表的数据项的文本内容。
  • record:是一个对象,包含了当前行的所有数据。
javascript">第三种情况详写1.状态处理 <a-table><span slot="canFinanceStatus" slot-scope="text"><a-badge :status="text | canFinanceStatus" :text="text | canFinanceText" /></span></a-table>const statusMap = {0: {status: 'default',text: '暂停'},1: {status: 'processing',text: '开始'}}filters: {canFinanceText(type) {return statusMap[type].text},canFinanceStatus(type) {return statusMap[type].status}}
javascript">2.操作列表页面{title: '操作',dataIndex: 'operation',scopedSlots: { customRender: 'operation' }}配置<template slot="action" slot-scope="text, record"><a-dropdown><a class="ant-dropdown-link" @click.prevent>更多<a-icon type="down" /></a><template #overlay><a-menu @click="onClickBtn(record, $event)"><a-menu-item key="1">上传担保协议</a-menu-item><a-menu-item key="2" v-if="record.signStatus == 0">协议签署 </a-menu-item></a-menu></template></a-dropdown></template>

 示例图

 a-spin

即全局loading


http://www.ppmy.cn/news/1506735.html

相关文章

2024年6月 青少年python一级等级考试真题试卷

202406 青少年软件编程等级考试Python一级真题 试卷总分数&#xff1a;100分 第 1 题 在使用turtle绘制图形时&#xff0c;如果要控制小海龟移动到 x 坐标为 200&#xff0c;y 坐标为150 的位置&#xff0c;以下代码能够实现效果的是&#xff1f;&#xff08; &#xff09; …

基于vue框架的4S店汽车维修保养管理系统28a7y(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;客户,技师,车辆信息,财务,客户维修,维修分配,维修订单,保养预约,保养分配,保养订单,维修费用,保养费用 开题报告内容 基于Vue框架的4S店汽车维修保养管理系统 开题报告 一、项目背景与意义 随着汽车产业的迅猛发展&#xff0c;4S店作…

Ubuntu23.10 安装kvm并使用nmtui创建桥接网络

1.实验准备 &#xff08;1&#xff09;使用Vmware安装Ubuntu23.10 2.实验步骤 &#xff08;1&#xff09;配置ssh &#xff08;2&#xff09;安装qemu &#xff08;3&#xff09;安装libvirt服务 &#xff08;4&#xff09;安装virtinst &#xff08;5&#xff09;启动libvir…

案例:使用Haproxy搭建Web集群

目录 Haproxy Haproxy和LVS的区别 LVS Haproxy 代理和调度的区别 Haproxy调度算法原理 案例 拓扑图 Web服务器配置 Haproxy配置 安装Haproxy Haproxy初步设置 Haproxy配置 配置文件各行说明 监听项配置 启动Haproxy 测试 配置Haproxy日志 Haproxy Haproxy是…

QT输入组、QT显示组

目录 QT输入组 ​编辑 Combo Box&#xff08;下拉菜单部件&#xff09; Font Combo Box&#xff08;显示系统中可用的字体&#xff09; Line Edit&#xff08;行编辑器&#xff09; Text Edit&#xff08;文本编辑器&#xff09; Plain Text Edit&#xff08;纯文本编辑…

uni-app开发微信小程序注意事项,不要用element-ui

前端扩展组件千万不要用element-ui&#xff0c;开发的时候不报错&#xff0c;发布的时候会报错无法发布。 可以用vant weapp【注意是weapp】 iView weapp 附上hbuilder官方文档 组件的概念 | uni-app官网 (dcloud.net.cn)

FFMPEG Mac版本编译

Mac下FFMPEG使用 There are a few ways to get FFmpeg on OS X. One is to build it yourself. Compiling on Mac OS X is as easy as any other *nix machine, there are just a few caveats(警告). The general procedure is get the source, then ./configure <flags&g…

Flutter中的 extended_nested_scroll_view 库:介绍与使用指南

在开发Flutter应用时&#xff0c;处理复杂的滚动效果是一项常见的任务。Flutter提供了NestedScrollView来实现可折叠的应用栏与滚动列表的结合&#xff0c;但在某些情况下&#xff0c;NestedScrollView可能不够强大。为了解决这些问题&#xff0c;我们可以使用extended_nested_…