antd vue table表格内容如何格式化

 更新时间:2022年01月24日 09:59:31   作者:狗狗狗狗亮  
这篇文章主要介绍了antd vue table表格内容如何格式化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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>
          );      
    }
}

效果如下

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue开发runtime core中的虚拟节点示例详解

    vue开发runtime core中的虚拟节点示例详解

    这篇文章主要为大家介绍了vue开发runtime core中的虚拟节点示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue3中依赖注入provide、inject的使用

    Vue3中依赖注入provide、inject的使用

    这篇文章主要介绍了Vue3中依赖注入provide、inject的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue保持用户登录状态(各种token存储方式)

    Vue保持用户登录状态(各种token存储方式)

    本文主要介绍了Vue保持用户登录状态(各种token存储方式),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue3封装一个带动画的关闭按钮示例详解

    vue3封装一个带动画的关闭按钮示例详解

    这篇文章主要为大家介绍了vue3封装一个带动画的关闭按钮示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue引入使用localforage改进本地离线存储方式(突破5M限制)

    Vue引入使用localforage改进本地离线存储方式(突破5M限制)

    这篇文章主要介绍了Vue引入使用localforage改进本地离线存储方式(突破5M限制),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • UNIapp实现局域网内在线升级的操作方法

    UNIapp实现局域网内在线升级的操作方法

    这篇文章主要介绍了UNIapp实现局域网内在线升级的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • 10分钟带你上手Vue3中新增的API

    10分钟带你上手Vue3中新增的API

    这篇文章主要介绍了10分钟教你快速上手Vue3中新增的API,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • VuePress 中如何增加用户登录功能

    VuePress 中如何增加用户登录功能

    VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的
    2019-11-11
  • Vue实现实时监听页面宽度高度变化

    Vue实现实时监听页面宽度高度变化

    这篇文章主要为大家详细介绍了Vue如何实现实时监听页面宽度高度变化,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • mpvue微信小程序开发之实现一个弹幕评论

    mpvue微信小程序开发之实现一个弹幕评论

    这篇文章主要介绍了mpvue小程序开发之 实现一个弹幕评论功能,本文通过实例讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11

最新评论