antd vue table表格内容如何格式化
时间:2022-04-16 09:59:26|栏目:vue|点击: 次
antd vue table表格内容格式化
目前在学习使用ant-design-vue,遇到table内容需要格式化
如下面的性别和打印状态
操作如下
columns中
{ title: "性别", dataIndex: "sex", align: "center", width: 80, scopedSlots: { customRender: "sex" } }, { title: "打印状态", 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>
转换后
antd table表格组件基本使用
第一次使用antd的table表格组件
借用官方文档数据,展示下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> ); } }
效果如下