广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >antd vue table表格内容如何格式化
  • 246
分享到

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

2024-04-02 19:04:59 246人浏览 独家记忆
摘要

目录antd Vue table表格内容格式化如下面的性别和打印状态antd table表格组件基本使用借用官方文档数据,展示下Demoantd 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>
          );      
    }
}

效果如下

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: antd vue table表格内容如何格式化

本文链接: https://www.lsjlt.com/news/163520.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • antd vue table表格内容如何格式化
    目录antd vue table表格内容格式化如下面的性别和打印状态antd table表格组件基本使用借用官方文档数据,展示下Demoantd vue table表格内容格式化 目...
    99+
    2022-11-13
  • Bootstrap中Table如何实现单元格内容格式化
    这篇文章主要介绍Bootstrap中Table如何实现单元格内容格式化,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、单元格内容格式化   $('#table1&...
    99+
    2022-10-19
  • vue-electron中如何修改表格内容和样式
    今天小编给大家分享的是vue-electron中如何修改表格内容和样式,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。需求将表格导入并向其添加内容,然后导出表格,且表格样式(一般是值宽...
    99+
    2023-08-03
  • Vue如何实现table表格置顶
    目录如何实现table表格置顶置顶前置顶后点击table表格某一行让其置顶如何实现table表格置顶 老大让做vue项目,可是我对vue还不熟,抓紧时间学习,记录 此处省略css &...
    99+
    2022-11-13
  • html中的table表格标签内容如何居中显示
    小编给大家分享一下html中的table表格标签内容如何居中显示,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   首先我们先...
    99+
    2022-10-19
  • 如何解决table表格某一td内容太多导致样式混乱
    这篇文章主要介绍“如何解决table表格某一td内容太多导致样式混乱”,在日常操作中,相信很多人在如何解决table表格某一td内容太多导致样式混乱问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • vue-electron中修改表格内容并修改样式
    目录需求技术xlsx-style全部代码需求 将表格导入并向其添加内容,然后导出表格,且表格样式(一般是值宽高合并颜色等)不能改变。 技术 electronxlsxxlsx-styl...
    99+
    2023-05-20
    vue-electron修改表格样式
  • HTML表格如何隐藏内容
    这篇文章主要为大家展示了“HTML表格如何隐藏内容”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML表格如何隐藏内容”这篇文章吧。 ...
    99+
    2022-10-19
  • wps表格如何筛选重复内容
    这篇文章主要介绍了wps表格如何筛选重复内容的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇wps表格如何筛选重复内容文章都会有所收获,下面我们一起来看看吧。首先,我们打开我们电脑上面的一个wps表格文档。 之后...
    99+
    2023-07-01
  • java如何读取word文档表格内容
    要读取Word文档中的表格内容,可以使用Apache POI库来处理Word文档。以下是一个简单的示例代码,演示如何读取Word文档...
    99+
    2023-09-22
    java word
  • Vue中table如何实现动态表格td可编辑
    这篇文章主要介绍Vue中table如何实现动态表格td可编辑,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!项目中需求用到可编辑表格下图这种 ↓element UI 组件table表格...
    99+
    2022-10-19
  • Vue中Element的table多选表格如何实现单选
    目录Element的table多选表格实现单选vue table单选逻辑Element的table多选表格实现单选 效果图 1.在多选表格的基础上进行处理, 呈现单选表格的作用 2...
    99+
    2022-11-13
  • Vue element-ui中表格过长内容隐藏显示的实现方式
    目录一、el-table表格二、Popover 弹出框总结一、el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框...
    99+
    2022-11-13
  • Vueel-table组件如何实现将日期格式化
    目录vue el-table组件将日期格式化vue对时间进行格式化输出,以el-table为例解决方法总结vue el-table组件将日期格式化 项目需要实现一个将后端时间数据显示...
    99+
    2023-05-15
    Vue el-table组件 el-table将日期格式化 Vue el-table日期格式化
  • jquery如何清空表格除前两行内容
    本篇内容介绍了“jquery如何清空表格除前两行内容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • vue table表格中如何控制下拉框的显示隐藏
    目录vue table表格控制下拉框的显示隐藏vue下拉框清空总结vue table表格控制下拉框的显示隐藏 需求:点击表格的某一个列的吗某个值,显示那值得下拉框,失去焦点时则隐藏 ...
    99+
    2023-01-18
    vue table表格 table下拉框的显示 table下拉框的隐藏
  • MySQL如何从二进制内容看InnoDB行格式
    这篇文章主要介绍“MySQL如何从二进制内容看InnoDB行格式”,在日常操作中,相信很多人在MySQL如何从二进制内容看InnoDB行格式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望...
    99+
    2022-10-19
  • 电脑表格打开是兼容模式如何弄
    要将电脑表格打开为兼容模式,您可以按照以下步骤进行操作:1. 打开电脑表格应用程序(例如Microsoft Excel)。2. 在菜...
    99+
    2023-09-11
    电脑
  • 云服务器如何选大小的内存卡格式和内容
    对于存储数据的服务器来说,选择合适的内存卡格式和内容非常重要。内存卡格式可以是NVMe或NVMe-PKC等常见的内存卡格式,它们通常是基于闪存技术设计的,可以在云服务器上存储更大的数据集。而内容可以是二进制数据或者文本文件等数据格式,这些数...
    99+
    2023-10-27
    大小 格式 服务器
  • wps中如何将两个表格的内容合并到一起
    小编给大家分享一下wps中如何将两个表格的内容合并到一起,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!把两个表格的内容合并到一起的方法是,首先打开一张空表,点击智能工具箱栏目;然后找到合并表格选项,点击下拉按钮,选择【多个...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作