Vue.js高效前端开发 • 【Ant Design of Vue框架基础】

怼烎@ 2023-01-23 08:51 22阅读 0赞

[全部章节 >>>>][Link 1]

--------------------

### 文章目录 ###

*  一、Ant Design of Vue框架
 *   *  1、Ant Design介绍
     *  2、Ant Design of Vue安装
     *  3、Ant Design of Vue组件使用
     *  4、实践练习
 *  二、布局组件
 *   *  1、布局组件介绍
     *  2、布局组件使用
     *  3、导航菜单组件使用
     *  4、面包屑组件使用
     *  5、实践练习
 *  三、按钮和全局提示组件
 *   *  1、全局提示组件使用
     *  2、按钮组件使用
     *  3、实践练习
 *  四、表格组件
 *   *  1、表格组件介绍
     *  2、表格组件使用
     *  3、实践练习
 *  总结：

--------------------

# 一、Ant Design of Vue框架 #

## 1、Ant Design介绍 ##

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁金服体验技术部经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系Ant Design。

基于“确定”和“自然”的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]  
Ant Design设计体系由**四个方面**组成：

*  设计价值观
 *  视觉设计
 *  可视化设计
 *  动画效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]

## 2、Ant Design of Vue安装 ##

Ant Design of Vue是Ant Design的Vue实现，开发和服务于企业级后台产品。

**主要特点**

*  提炼自企业级中后台产品的交互语言和视觉风格。
 *  开箱即用的高质量Vue组件。
 *  共享Ant Design of React设计工具体系。

**支持环境**

*  现代浏览器和IE9及以上。
 *  支持服务端渲染。

Ant Design of Vue是Ant Design的Vue实现，开发和服务于企业级后台产品。、

**安装**

*  浏览器引入。

*  使用npm或yarn安装。

## 3、Ant Design of Vue组件使用 ##

Ant Design of Vue组件基本格式如下：

<a-组件名 属性=值 …></a-组件名>

组件必须添加到Vue的容器标签中，这样组件才能被渲染。

`示例：`添加输入框组件和按钮组件，但单击按钮组件时，显示全局消息提示框。

HTML代码:

JavaScript代码:

var vm = new Vue({ 
          el: "#app",
          data: { 
            userName: ""
          },
          methods: { 
            doSubmit: function () { 
              this.$message.info("欢迎您！" + this.userName);
            }
          },
        })

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>Hello AntD</title>
    		<link rel="stylesheet" type="text/css" href="css/antd.css" />
    	</head>
    	<body>
    		<div id="app" style="margin:20px auto;width:600px">
    			<p style="width:200px">
    				<a-input placeholder="请输入姓名..." v-model="userName" />
    			</p>
    			<a-button type="primary" @click="doSubmit">提交</a-button>
    		</div>
    
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript"> var vm = new Vue({ el: "#app", data: { userName: "" }, methods: { doSubmit: function() { this.$message.info("欢迎您！" + this.userName); } }, }) </script>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]

## 4、实践练习 ##

# 二、布局组件 #

## 1、布局组件介绍 ##

Ant Design of Vue中的布局组件主要协助进行页面级整体布局。

布局组件包含`三个设计原则:`

*  尺寸
 *  交互
 *  视觉

> `Ant Design`通过网格体系来实现视觉体系的秩序。网格的基数为8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。

## 2、布局组件使用 ##

**组件概述：**

`Layout组件：`布局容器，其下可嵌套`Header组件`、`Sider组件`、`Content组件`、`Footer组件`或`Layout组件`本身，可以放在任何父容器中。

语法如下所示：

<a-layout 属性=”值”>…</a-layout>

`Header组件：`顶部布局，自带默认样式，其下可嵌套任何元素，只能放在`Layout组件`中。

语法如下所示：

<a-layout>
      <a-layout-header>….… <a-layout-header >
    </a-layout>

`Sider组件：`侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout组件中。

语法如下所示：

<a-layout>
      <a-layout-sider>….…</a-layout-sider>
    </a-layout>

`Content组件：`内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout组件中。

语法如下所示：

<a-layout>
      <a-layout-content>….… <a-layout-content>
    </a-layout>

`Footer组件：`底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout组件中。

语法如下所示：

<a-layout>
      <a-layout-footer>….…</a-layout-footer>
    </a-layout>

> 布局采用HTML5的flex布局实现。

**组件属性和事件**

`Layout组件`、`Header组件`、`Footer组件`和`Content组件`的属性相同，如下面表所示。

<table> 
 <thead> 
  <tr> 
   <th><strong>属性</strong></th> 
   <th align="left"><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>class</td> 
   <td align="left">表示class样式</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="left">指定样式</td> 
  </tr> 
  <tr> 
   <td>hasSider</td> 
   <td align="left">表示子元素里有Sider，一般不用指定。</td> 
  </tr> 
 </tbody> 
</table>

Sider组件的属性如下表所示。

<table> 
 <thead> 
  <tr> 
   <th><strong>属性</strong></th> 
   <th align="left"><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>breakpoint</td> 
   <td align="left">触发响应式布局的断点</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td align="left">表示class样式</td> 
  </tr> 
  <tr> 
   <td>collapsed</td> 
   <td align="left">表示当前收起状态</td> 
  </tr> 
  <tr> 
   <td>collapsedWidth</td> 
   <td align="left">默认值为80，表示收缩宽度，设置为0会出现特殊trigger</td> 
  </tr> 
  <tr> 
   <td>collapsible</td> 
   <td align="left">默认值为false，表示是否可收起</td> 
  </tr> 
  <tr> 
   <td>defaultCollapsed</td> 
   <td align="left">默认值为false，表示是否默认收起</td> 
  </tr> 
  <tr> 
   <td>reverseArrow</td> 
   <td align="left">默认值为false，表示是翻转折叠提示箭头的方向，当Sider在右边时可以使用</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td align="left">指定样式</td> 
  </tr> 
  <tr> 
   <td>theme</td> 
   <td align="left">默认值为dark，表示主题颜色，只有两个值light和dark</td> 
  </tr> 
  <tr> 
   <td>trigger</td> 
   <td align="left">表示自定义trigger，设置为null时隐藏</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td align="left">默认值为200，表示宽度</td> 
  </tr> 
 </tbody> 
</table>

布局组件可用的事件如表所示

<table> 
 <thead> 
  <tr> 
   <th><strong>事件</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>collapse</td> 
   <td>展开-收起时的回调函数</td> 
  </tr> 
  <tr> 
   <td>breakpoint</td> 
   <td>触发响应式布局断点时的回调函数</td> 
  </tr> 
 </tbody> 
</table>

`示例：`

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>基本布局</title>
    		<link rel="stylesheet" type="text/css" href="css/antd.css" />
    		<style type="text/css"> #layout-basic { text-align: center; } #layout-basic .ant-layout-header, #layout-basic .ant-layout-footer{ background: #7bdcea; color: #fff; } #layout-basic .ant-layout-footer{ line-height: 1.5; } #layout-basic .ant-layout-sider{ background: #3ba0e9; color: #fff; line-height: 120px; } #layout-basic .ant-layout-content{ background: rgba(12, 101, 233, 1); color: #fff; line-height: 120px; min-height: 120px; } #layout-basic>.ant-layout{ margin-bottom: 48px; } #layout-basic>.ant-layout:last-child{ margin: 0; } </style>
    	</head>
    	<body>
    		<div id="app">
    			<div id="layout-basic">
    				<h1>上中下三栏布局</h1>
    				<a-layout>
    					<a-layout-header>Header</a-layout-header>
    					<a-layout-content>Content</a-layout-content>
    					<a-layout-footer>Footer</a-layout-footer>
    				</a-layout>
    
    				<h1>上中下带左边栏布局</h1>
    				<a-layout>
    					<a-layout-header>Header</a-layout-header>
    					<a-layout>
    						<a-layout-sider>Sider</a-layout-sider>
    						<a-layout-content>Content</a-layout-content>
    					</a-layout>
    					<a-layout-footer>Footer</a-layout-footer>
    				</a-layout>
    
    				<h1>上中下带右边栏布局</h1>
    				<a-layout>
    					<a-layout-header>Header</a-layout-header>
    					<a-layout>
    						<a-layout-content>Content</a-layout-content>
    						<a-layout-sider>Sider</a-layout-sider>
    					</a-layout>
    					<a-layout-footer>Footer</a-layout-footer>
    				</a-layout>
    
    				<h1>左导航栏带上中下布局</h1>
    				<a-layout>
    					<a-layout-sider>Sider</a-layout-sider>
    					<a-layout>
    						<a-layout-header>Header</a-layout-header>
    						<a-layout-content>Content</a-layout-content>
    						<a-layout-footer>Footer</a-layout-footer>
    					</a-layout>
    				</a-layout>
    
    			</div>
    		</div>
    
    
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript"> var vm = new Vue({ el: "#app", }) </script>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]

## 3、导航菜单组件使用 ##

航菜单组件是为页面和功能提供导航的菜单列表。导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。

一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。导航菜单的

`语法如下所示：`

<a-menu>
      <a-menu-item key="唯一标志">菜单项</a-menu-item>
      <a-sub-menu title="子菜单" key="唯一标志">
        <a-menu-item key="唯一标志">子菜单项</a-menu-item>
      </a-sub-menu>
    </a-menu>

导航菜单组件常用属性如下面表:

<table> 
 <thead> 
  <tr> 
   <th><strong>属性</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>defaultOpenKeys</td> 
   <td>表示初始展开的SubMenu菜单项key数组</td> 
  </tr> 
  <tr> 
   <td>defaultSelectedKeys</td> 
   <td>表示初始选中的菜单项key数组</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>默认值是vertical，表示菜单类型，现在支持垂直（vertical）、水平（horizontal）和内嵌模式（inline）三种。</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>默认值是false，表示是否允许多选</td> 
  </tr> 
  <tr> 
   <td>selectable</td> 
   <td>默认值是true，表示是否允许选中</td> 
  </tr> 
  <tr> 
   <td>theme</td> 
   <td>默认值是light，表示主题颜色，只有light和dark颜色</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>表示是否禁用</td> 
  </tr> 
  <tr> 
   <td>key</td> 
   <td>表示唯一标志</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>表示设置收缩时展示的悬浮标题</td> 
  </tr> 
 </tbody> 
</table>

`示例：`使用导航菜单组件创建CMS的系统设置的垂直菜单。

<a-menu style="width: 256px;" mode="inline" theme="dark">
      <a-sub-menu key="sub1">
        <span slot="title">
          <span>网站设置</span>
        </span>
        <a-menu-item key="1">网站信息</a-menu-item>
        <a-menu-item key="2">备案信息</a-menu-item>
        <a-menu-item key="3">SEO信息</a-menu-item>
        <a-menu-item key="4">二维码</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title">
          <span>数据设置</span>
        </span>
        <a-menu-item key="5">状态数据</a-menu-item>
        <a-menu-item key="6">类别数据</a-menu-item>
      </a-sub-menu>
    </a-menu>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>导航栏菜单组件的使用</title>
    		<link rel="stylesheet" type="text/css" href="css/antd.css" />
    		<style type="text/css"> *{ margin: 0; padding: 0; } </style>
    	</head>
    	<body>
    		<div id="app" style="margin:20px auto;width:600px">
    			<a-menu style="width: 256px;" mode="inline" theme="dark">
    				<a-sub-menu key="sub1">
    					<span slot="title">
    						<span>网站设置</span>
    					</span>
    					<a-menu-item key="1">网站信息</a-menu-item>
    					<a-menu-item key="2">备案信息</a-menu-item>
    					<a-menu-item key="3">SEO信息</a-menu-item>
    					<a-menu-item key="4">二维码</a-menu-item>
    				</a-sub-menu>
    				<a-sub-menu key="sub2">
    					<span slot="title">
    						<span>数据设置</span>
    					</span>
    					<a-menu-item key="5">状态数据</a-menu-item>
    					<a-menu-item key="6">类别数据</a-menu-item>
    				</a-sub-menu>
    			</a-menu>
    
    		</div>
    
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript"> var vm = new Vue({ el: "#app" }) </script>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]

## 4、面包屑组件使用 ##

面包屑组件（Breadcrumb）用来显示当前页面在系统层级结构中的位置，并能向上返回。在以下情况下使用面包屑组件：

*  当系统拥有超过两级以上的层级结构时。
 *  当需要告知用户『你在哪里』时。
 *  当需要向上导航的功能时。

面包屑组件语法如下所示

<a-breadcrumb>
      <a-breadcrumb-item>导航项</a-breadcrumb-item>
      <a-breadcrumb-item><a href="">导航项</a></a-breadcrumb-item>
    </a-breadcrumb>

`示例：`使用面包屑组件实现栏目详情的路径。

<a-breadcrumb style="margin: 16px 0">
      <a-breadcrumb-item><a href="">首页</a></a-breadcrumb-item>
      <a-breadcrumb-item><a href="">栏目管理</a></a-breadcrumb-item>
      <a-breadcrumb-item>栏目详情</a-breadcrumb-item>
    </a-breadcrumb>

`示例：`

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>面包屑组件的使用</title>
    		<link rel="stylesheet" type="text/css" href="css/antd.css" />
    		<style type="text/css"> * { margin: 0; padding: 0; } </style>
    	</head>
    	<body>
    		<div id="app" style="margin:20px auto;width:600px">
    			<a-breadcrumb style="margin: 16px 0">
    				<a-breadcrumb-item><a href="">首页</a></a-breadcrumb-item>
    				<a-breadcrumb-item><a href="">栏目管理</a></a-breadcrumb-item>
    				<a-breadcrumb-item>栏目详情</a-breadcrumb-item>
    			</a-breadcrumb>
    
    		</div>
    
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript"> var vm = new Vue({ el: "#app" }) </script>
    	</body>
    </html>

![在这里插入图片描述][20210715184123939.png]

## 5、实践练习 ##

# 三、按钮和全局提示组件 #

## 1、全局提示组件使用 ##

全局提示组件用于全局展示操作反馈信息。在以下情况下使用全局提示组件：

*  可提供成功、警告和错误等反馈信息。
 *  顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

// 成功消息
    $message.success(content, [duration], onClose)

// 错误消息
    $message.error(content, [duration], onClose)

// 信息消息
    $message.info(content, [duration], onClose)

// 警告消息
    $message.warn(content, [duration], onClose)

// 加载消息
    $message.loading(content, [duration], onClose)

全局提示组件提供了一些静态方法，语法如下所示：

全局提示方法的参数

<table> 
 <thead> 
  <tr> 
   <th><strong>参数</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>content</td> 
   <td>提示内容</td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>自动关闭的延时，单位秒。设为0时不自动关闭。</td> 
  </tr> 
  <tr> 
   <td>onClose</td> 
   <td>关闭时触发的回调函数</td> 
  </tr> 
 </tbody> 
</table>

## 2、按钮组件使用 ##

按钮组件用于开始一个即时操作。一般用于标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

按钮组件的属性如下：

<table> 
 <thead> 
  <tr> 
   <th><strong>属性</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>disabled</td> 
   <td>表示按钮失效状态</td> 
  </tr> 
  <tr> 
   <td>ghost</td> 
   <td>表示幽灵按钮，即是否使按钮背景透明。</td> 
  </tr> 
  <tr> 
   <td>htmlType</td> 
   <td>设置button原生的type值，可选值请参考HTML标准</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>设置按钮的图标类型</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>设置按钮载入状态</td> 
  </tr> 
  <tr> 
   <td>shape</td> 
   <td>设置按钮形状，可选值为circle或者不设</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>设置按钮大小，可选值为small（小）、large（大）或者不设</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>设置按钮类型，可选值为primary、dashed或danger</td> 
  </tr> 
 </tbody> 
</table>

按钮组件的事件如下：

<table> 
 <thead> 
  <tr> 
   <th><strong>事件</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click</td> 
   <td>点击按钮时的回调</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>按钮组件的使用</title>
    		<link rel="stylesheet" type="text/css" href="css/antd.css" />
    		<style type="text/css"> * { margin: 0; padding: 0; } </style>
    	</head>
    	<body>
    		<div id="app">
    			<a-button-group>
    				<a-button type="primary" @click="doClick">主按钮</a-button>
    				<a-button disabled>次按钮</a-button>
    				<a-button type="dashed">虚线按钮</a-button>
    				<a-button type="danger" ghost>危险按钮</a-button>
    			</a-button-group>
    			<br />
    			<a-button type="dashed" shape="circle" icon="search" />
    			<a-button type="dashed" icon="search" @click="doClick">搜索</a-button>
    			<a-button type="primary" loading>
    				加载...
    			</a-button>
    			<a-button type="primary" shape="circle" loading />
    		</div>
    
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript"> var vm = new Vue({ el: "#app", methods: { doClick: function() { this.$message.warn("触发按钮组件的Click事件"); } }, }); </script>
    	</body>
    </html>

## 3、实践练习 ##

# 四、表格组件 #

## 1、表格组件介绍 ##

表格组件用于展示行列数据。一般在以下情况下使用：

*  当有大量结构化的数据需要展现时。
 *  当需要对数据进行排序、搜索、分页以及自定义操作等复杂行为时。

表格组件包含的`常用属性`如表所示：

<table> 
 <thead> 
  <tr> 
   <th><strong>属性</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bordered</td> 
   <td>是否展示外边框和列边框</td> 
  </tr> 
  <tr> 
   <td>childrenColumnName</td> 
   <td>指定树形结构的列名</td> 
  </tr> 
  <tr> 
   <td>columns</td> 
   <td>表格列的配置描述</td> 
  </tr> 
  <tr> 
   <td>dataSource</td> 
   <td>数据数组</td> 
  </tr> 
  <tr> 
   <td>defaultExpandAllRows</td> 
   <td>初始时，是否展开所有行</td> 
  </tr> 
  <tr> 
   <td>defaultExpandedRowKeys</td> 
   <td>默认展开的行</td> 
  </tr> 
  <tr> 
   <td>showHeader</td> 
   <td>是否显示表头</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>正常或迷你类型</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>表格标题</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>设置横向或纵向滚动，也可用于指定滚动区域的宽和高</td> 
  </tr> 
 </tbody> 
</table>

表格组件包含的`常用事件`如表所示：

<table> 
 <thead> 
  <tr> 
   <th><strong>事件</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>expandedRowsChange</td> 
   <td>展开的行变化时触发函数</td> 
  </tr> 
  <tr> 
   <td>change</td> 
   <td>分页、排序及筛选变化时触发函数</td> 
  </tr> 
  <tr> 
   <td>expand</td> 
   <td>点击展开图标时触发函数</td> 
  </tr> 
 </tbody> 
</table>

## 2、表格组件使用 ##

使用表格组件需要首选设置表格列的数据，其中列的属性如下表所示

<table> 
 <thead> 
  <tr> 
   <th><strong>属性</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>align</td> 
   <td>设置列内容的对齐方式left、rigt和center，默认值是left</td> 
  </tr> 
  <tr> 
   <td>colSpan</td> 
   <td>表头列合并，当设置为0时，表示不渲染列合并</td> 
  </tr> 
  <tr> 
   <td>dataIndex</td> 
   <td>列数据在数据项中对应的key，此属性是必须设置属性</td> 
  </tr> 
  <tr> 
   <td>key</td> 
   <td>Vue需要的key，如果已经设置了唯一的dataIndex，可以忽略这个属性</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>列头显示文字</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>列宽度</td> 
  </tr> 
  <tr> 
   <td>slots</td> 
   <td>使用columns时，可以通过该属性配置支持slot的属性，如slots: { filterIcon: “XXX”}</td> 
  </tr> 
  <tr> 
   <td>scopedSlots</td> 
   <td>使用columns时，可以通过该属性配置支持slot-scope的属性，如scopedSlots: { customRender: “XXX”}</td> 
  </tr> 
 </tbody> 
</table>

`示例：`

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>表格组件的使用</title>
    		<link rel="stylesheet" type="text/css" href="css/antd.css" />
    		<style type="text/css"> * { margin: 0; padding: 0; } #app{ margin: 50px 20px; } </style>
    	</head>
    	<body>
    		<div id="app">
    			<a-table v-bind="attrs" :columns="columns" bordered>
    				<span slot="id" slot-scope="text">
    					<a href="javascript:;" @click="doRemove(text)">删除</a>
    				</span>
    			</a-table>
    		</div>
    
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript"> var vm = new Vue({ el: "#app", data: { columns: [{ title:"姓名",dataIndex:"name",key:"name",align:"center" },{ title:"年龄",dataIndex:"age",key:"age",align:"center" },{ title:"住址",dataIndex:"addrss",key:"addrss",align:"center" },{ title:"操作",dataIndex:"id",key:"id",align:"center", scopedSlots:{ customRender:"id" } }], attrs: { dataSource: [{ id: 1,name: "张三",age: 20,addrss: "云南"}, { id: 2,name: "李四",age: 21,addrss: "四川"}, { id: 3,name: "王五",age: 22,addrss: "贵州"}, { id: 4,name: "赵六",age: 23,addrss: "北京"}, { id: 5,name: "钱七",age: 24,addrss: "上海"}], rowkey: "id" } }, methods: { doRemove: function(id) { this.$message.warn("删除数据"); } }, }); </script>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8]

## 3、实践练习 ##

# 总结： #

*  Ant Design是蚂蚁金服公司开发服务于企业级产品的设计体系，该设计体系是的大量的项目实践的总结
 *  Ant Design of Vue是基于Vue基础上实现Ant Design设计的UI框架，该框架包含大量成熟的组件，可以用来快速构建企业信息管理系统的中后台Web应用的界面。
 *  Ant Design of Vue中的布局组件主要协助进行页面级整体布局。
 *  全局提示组件用于全局展示操作反馈信息。
 *  按钮组件用于开始一个即时操作。一般用于标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
 *  表格组件用于展示行列数据

[Link 1]: https://ymjin.blog.csdn.net/article/details/118276452
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221004/5405ac3e6ea2418e99f14da5ca62787e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: /images/20221004/06c8fbf4251f44d7a216b20cc0f9c560.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]: /images/20221004/65f30f32e0a04caf951cdb3958ec3acf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]: /images/20221004/a4f1372cec05497a9b12b35364da4abe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]: /images/20221004/c00e6b2d27bd464b84005b6b13c0172f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]: /images/20221004/50e5c61b460d46b7a9a46feaf4a57052.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]: /images/20221004/6b47deb82cba47118bf5c50ec9e56096.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]: /images/20221004/d28e2a0da75d4d58b5cea028446cb3ec.png
[20210715184123939.png]: /images/20221004/9df99df1f36c41e796916d1f487a7725.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8]: /images/20221004/c767cc66e5894f6c9ab831f3e8663484.png