各位老铁们，大家好，今天由我来为大家分享ant design，以及ant design官网中文的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
一、ant-design官方只支持哪个框架
AntDesign是一个ui框架，和bootstrap一样是ui框架。里面的组件很完善，开发中后台系统非常方便。分别基于react、vue、angular框架，各自开发了一套AntDesign的UI框架。
3、Typography排版：这个是文案的排版。
1、Grid栅格：24栅格系统，和 bootstrap中的12栅格系统一样的功能。
a、<Rowgutter={16}>，给Col组件之间添加16像素的间距【原理和bootstrap差不多】。他们之间的间距是以padding撑出来的，所以在Col组件上不要使用背景色，最好其它的样式都不要设置吧。
b、两种栅格系统【基础栅格、flex栅格布局】。
2、Layout布局：这个是针对页面级整体布局。
二、ant design(Tabs,Table)配置
1.Tabs标签页默认样式修改，确保先将所有的padding和margin重置。.ant-tabs-bar设置默认的黑灰border-bottom，只需在这里将border都设为0即可。.ant-tabs.ant-tabs-card>.ant-tabs-bar.ant-tabs-tab设置了每一个tab的一些样式，通过debug调试即可。
2.table表格参数配置，可以自定义翻页，分步请求。Table中主要配置解释，column配置主要作用是将列名及列内容做一一对应，dataIndex和dataSource里面的数据值也是一一对应的关系。后面的render除了过滤转换数据同样可以return HTML。recor等价于applysPayed[i]，rowKey给每一行一个唯一key，避免报错。pagination默认为true，可以设置为false，则不会显示翻页。
const pagination= dataSourse&& dataSourse.length> 10? true: false;
rowKey={record=> record._id} //避免报错（key)唯一
showHeader={false} //不展示每一列的名称
columns={columns}
dataSource={dataSourse}
size="small" // tr的高度
pagination={pagination}
3.Pagination参数配置，showQuickJumper带自动输入调整翻页，不传则无。其余参数是配合后台做翻页请求。
4.主题样式（颜色）修改目录路径：
/Users/yons/Desktop/task/server-commerce/node_modules/antd/lib/style/themes/default.less:
三、ant design中a-table 的record
1、text表示当前行的值，record表示当前行的数据
2、对于要进行render的列，如果写了对象里dataIndex这个变量，那么render的传参就按照截图中的三个参数来执行，第一个是该行对应的具体值，就是dataIndex指定的那个xxx，对应到dataSource里面对应的xxx
3、 {
4、 "parentId":"0",
5、 "_id":"1",
6、 "name":"家用电器1",
7、 "__v": 0,
8、 "place":'xx1'
9、 },
10、 {
11、 "parentId":"0",
12、 "_id":"2",
13、 "name":"家用电器2",
14、 "__v": 0,
15、 "place":'xx2'
16、 },
17、 {
18、 "parentId":"0",
19、 "_id":"3",
20、 "name":"家用电器3",
21、 "__v": 0,
22、 "place":'xx3'
23、 },
24、 {
25、 "parentId":"0",
26、 "_id":"4",
27、 "name":"家用电器4",
28、 "__v": 0,
29、 "place":'xx4'
30、 },
31、 {
32、 title:'分类名称',
33、 dataIndex:'place',
34、 },
35、 {
36、 title:'操作',
37、 width: 300,
38、 dataIndex:'name',
39、 render:(text,category)=>(//
40、 <span>
41、 <LinkButton>修改分类</LinkButton>
42、 {/*如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据*/}
43、 <LinkButton onClick={()=>{this.showSubCategorys(category)}}>查看子分类</LinkButton>
44、 </span>
45、 )
46、 },
47、 //显示指定一级分类对象的二级子列表
48、 showSubCategorys=(category)=>{
49、 //更新状态
50、 this.setState({
51、 parentId:category._id,
52、 parentName:category.name
53、 },()=>{//在状态更新且重新render()后执行
54、 console.log('parentId',this.state.parentId)
55、 //获取二级分类列表显示
56、 this.getCategorys()
57、 console.log(category);
58、起作用的是dataIndex,对于不用render的第一列来说，显示的就是dataIndex指定的DataSource里的place对应的比如xx1；
59、对于需要render的第二列来说，设置了onClick函数，输出的是第二个参数，也就是record，打印的是整个对象，
60、当然列表的从上到下顺序是DataSource数组的index顺序
61、 "parentId":"0",
62、 "_id":"1",
63、 "name":"家用电器1",
64、 "__v": 0,
65、 "place":'xx1'
66、那么此时的第一个参数应该是什么呢，将text添加进render中进行查看
67、 render:(text,category)=>(//
68、 <span>
69、 <LinkButton>{text}</LinkButton>
70、 {/*如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据*/}
71、 <LinkButton onClick={()=>{this.showSubCategorys(category)}}>查看子分类</LinkButton>
72、 </span>
73、 )
74、可见，text指定的是dataIndex指定的name，对应到DataSource里的name，
75、如果此时删掉render中的dataIndex，如果还保留三个参数，因为写了回调函数需要用到第二个record参数，所以要求该参数必须要有意义，结果便是，两个参数均是record参数对象，所以通常保留一个便是
76、 title:'操作',
77、 width: 300,
78、 render:(text,category)=>(//
79、 <span>
80、 <LinkButton>修改分类</LinkButton>
81、 {/*如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据*/}
82、 <LinkButton onClick={()=>{this.showSubCategorys(text,category)}}>查看子分类</LinkButton>
83、 </span>
84、 )
85、 },
86、 //显示指定一级分类对象的二级子列表
87、 showSubCategorys=(text,category)=>{
88、 //更新状态
89、 this.setState({
90、 parentId:category._id,
91、 parentName:category.name
92、 },()=>{//在状态更新且重新render()后执行
93、 console.log('parentId',this.state.parentId)
94、 //获取二级分类列表显示
95、 this.getCategorys()
96、 console.log(text);
97、 console.log(category);
98、 {
99、 title:'分类名称',
100、 dataIndex:'name',
101、 key:'name',
102、 },
103、 {
104、 title:'操作',
105、 width: 300,
106、 dataIndex:'name',//这个参数对render的传参起作用，如果不写dataIndex，那么render的第一个参数就是整行的对象
107、 //如果写了这个参数，那么第一个text参数就是这行的值，第二个record参数才是整行的数据对象
108、 render:(text,category)=>(//
109、 <span>
110、 <LinkButton>修改分类</LinkButton>
111、 {/*如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据*/}
112、 <LinkButton onClick={()=>{this.showSubCategorys(category)}}>查看子分类</LinkButton>
113、 </span>
114、 )
115、 },
四、Ant-design-vue的一些常见用法
1、 :pagination="false"//分页器配置项
2、 childrenColumnName=""
3、 添加row-key属性：row-key=""
4、 使用defaultExpandAllRows不能直接生效，需要定义一个loading字段，在获取数据后设置loading= true,在标签中进行v-if判断，即：<a-table v-if="loading" defaultExpandAllRows></a-table>
5、 翻译：类型错误：传播不可提交实例的尝试无效。
6、 原因：错误运用扩展运算符(...)
7、 注：对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
关于ant design，ant design官网中文的介绍到此结束，希望对大家有所帮助。
