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

目录
  • antd vue table表格内容格式化
    • 如下面的性别和打印状态
  • antd table表格组件基本使用
    • 借用官方文档数据，展示下Demo

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

效果如下

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • antd design table更改某行数据的样式操作

    antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string-->返回类型是String类型. 例子: import styless from './component/record.css';--->引入css样式. css: .csbsTypes{ font-family:微软雅黑, "Open Sans", "宋体"; font-weight: bold; } 代码: <

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

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

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

    目录 antd vue table表格内容格式化 如下面的性别和打印状态 antd table表格组件基本使用 借用官方文档数据,展示下Demo antd vue table表格内容格式化 目前在学习使用ant-design-vue,遇到table内容需要格式化 如下面的性别和打印状态 操作如下 columns中 { title: "性别", dataIndex: "sex", align: "center", width: 80, scoped

  • antd vue table跨行合并单元格,并且自定义内容实例

    ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', cla

  • vxe-table vue table 表格组件功能

    一个功能更加强大的 Vue 表格组件 查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树形表格 •可编辑表格 •数据校验 •全键盘操作 •Excel 表格 例子 <template> <div> <

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • element-ui中页面缩放时table表格内容错位的解决

    element-ui中页面缩放时table表格内容错位的解决

    目录 element-ui 页面缩放时table表格内容错位 element-ui表格优化--显示错位问题 element-ui 页面缩放时table表格内容错位 当table内容较多的时候, 横向拉动浏览器界面.最后一列自定义按钮,就会出现上下错误的情况. 解决办法: this.$refs.table.doLayout(); table增加ref属性. mounted() { window.addEventListener('resize', this.handleResize); } met

  • vue table表格中如何控制下拉框的显示隐藏

    目录 vue table表格控制下拉框的显示隐藏 vue下拉框清空 总结 vue table表格控制下拉框的显示隐藏 需求:点击表格的某一个列的吗某个值,显示那值得下拉框,失去焦点时则隐藏 平时 点击 失去焦点后变化平时的显示 <vxe-table-column align="center" title="类型" width="270" style="height:40px;" field="collectio

  • 封装Vue Element的table表格组件的示例详解

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • vue实现table表格里面数组多层嵌套取值

    目录 vue table表格里面数组多层嵌套取值 表格部分 methods里面定义方法 vue 多层数组嵌套循环,动态取值匹配 vue table表格里面数组多层嵌套取值 我现在是在表格里拿到级联选择器的多选的id,然后要根据这个id来匹配一个嵌套了三层的数组的第三层id,来拿名字渲染 表格部分 <tr style="height: 44px;line-height: 44px;">                 <td style="border: 1p

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

  • vue项目中将element-ui table表格写成组件的实现代码

    表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容: <el-table :data="tableData" border size="mini" fit highlight-current-row height="500"> <el-table-column type="index" align="cente

随机推荐