Vue + AntDesign 入门

前言

本篇博文记录 Vue 使用 AntDesign 组件中学习到的一些内容。

1. 安装

ant-design-vue 的安装

	npm install ant-design-vue --save
	
	npm install antd-init -g

main.js文件中引入：

	//引入ant-design-vue
	import Antd from 'ant-design-vue'
	import 'ant-design-vue/dist/antd.css'
	Vue.use(Antd)

2. vue + antdesign 表格

2.1. 简单使用

使用 vbind 设置格式定义和数据源

 <a-table
        :columns="columns" 
        :dataSource="data"
        bordered="true"
      >
 a-table>

使用 Vue 提供格式定义和数据源

//列定义
let columns = [
  {
    title: "类型",     // 表头
    align: "center",  // 文本居中
    dataIndex: "type" // 数据源中字段名
  },
  {
    title: "数量",
    align: "center",
    dataIndex: "num"
  }
];

export default {
  data() {
    return {
      map: {},
      columns: columns,
      data: [
        { type: "标签", num: 10 },
        { type: "基站", num: 5 }
      ]
    };
  }, ...
}	

3. 高级使用

官网：https://www.antdv.com/components/table-cn/

4. 分页

<a-table
		:pagination="{ pageSize: 10, total: data.length }"
		...

总结

持续更新