網(wǎng)站首頁 Vue 正文
antd vue table表格內(nèi)容格式化
目前在學習使用ant-design-vue,遇到table內(nèi)容需要格式化
如下面的性別和打印狀態(tài)
操作如下
columns中
{ title: "性別", dataIndex: "sex", align: "center", width: 80, scopedSlots: { customRender: "sex" } }, { title: "打印狀態(tài)", dataIndex: "status", align: "center", scopedSlots: { customRender: "status" } }
template中
<a-table bordered :rowSelection="rowSelection" :columns="columns" :dataSource="data" rowKey="id" :customRow="Rowclick" :pagination="pagination" :scroll="{ y: 520 }" size="small" > <span slot="sex" slot-scope="sex"> {{ sex == 1 ? "男" : sex == 0 ? "女" : "/" }} </span> <span slot="status" slot-scope="status"> {{ status == 1 ? "已打印" : "未打印" }} </span> </a-table>
轉(zhuǎn)換后
antd table表格組件基本使用
第一次使用antd的table表格組件
借用官方文檔數(shù)據(jù),展示下Demo
import React from 'react'; import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', render: text => <a>{text}</a>, }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Disabled User', age: 99, address: 'Sidney No. 1 Lake Park', }, ]; export default class Basic extends React.Component{ render(){ const rowSelection = { onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }, getCheckboxProps: record => ({ disabled: record.name === 'Disabled User', // Column configuration not to be checked name: record.name, }), }; return ( <div> <Table rowSelection={rowSelection} columns={columns} dataSource={data} /> </div> ); } }
效果如下
原文鏈接:https://blog.csdn.net/weixin_44046951/article/details/105629898
相關(guān)推薦
- 2022-08-27 C#從前面或后面按指定數(shù)量刪除字符串_C#教程
- 2022-09-25 apache+fastcgi如何使用Content-length和Transfer-Encoding
- 2022-12-10 Input系統(tǒng)之InputReader處理合成事件詳解_Android
- 2022-06-30 python數(shù)據(jù)操作之lambda表達式詳情_python
- 2022-04-28 C#圖形編程GDI+基礎(chǔ)介紹_C#教程
- 2023-11-12 python 將兩個或者多個字符串進行拼接
- 2022-11-18 詳解C語言內(nèi)核字符串拷貝與比較_C 語言
- 2022-04-25 C#用NPOI導出導入Excel幫助類_C#教程
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學習環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支