日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網(wǎng)站首頁 Vue 正文

antd?vue?table表格內(nèi)容如何格式化_vue.js

作者:狗狗狗狗亮 ? 更新時間: 2022-04-06 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

欄目分類
最近更新