vue中用table_Ant-Design-Vue中关于Table组件的使用

1. 如何自定义表格列头：

Name

const columns =[

{

dataIndex:'name',　　　　// 自定义列表头，则不能设置title属性align:'left',

slots: { title:'customTitle'}　　// 在这里定义一个slots属性，并设置一个title属性

}

]

页面将会渲染为如下：

2.如何设置自定义单行样式

// 这里传入的值分别是：record：当前行的原始数据，index：当前行的索引编辑

const columns =[

{

title:'菜单名称'dataIndex:'name',　　// dataIndex的值对应的是，列数据在数据项中对应的 keykey: 'name',　　　　　// 如果dataIndex属性值唯一，则可以不设置key属性

align:'left',

},

{

title:'操作',

key: 'action'

dataIndex:'action',

width:'30%',

scopedSlots: { customRender:'action' }, //这一行自定义渲染这一列

align: 'center'}

]

页面展示如下：

3.如何设置表头，页脚和边框线？

　　// 这里添加bordered属性，就可以添加上边框线

{ {text}}

　　// slot="title"就可以设置页头了，'title'改为其他值则没有页头Header--{ {currentPageData}}　　　　// 这里打印一下currentData，看下是啥值

Footer　　// 跟上同理

const columns =[　　// columns中并没有定义页头和页脚的相关代码

{

title:'Name',

dataIndex:'name',

scopedSlots: { customRender:'name'},

},

{

title:'Cash Assets',

className:'column-money',

dataIndex:'money',

},

{

title:'Address',

dataIndex:'address',

},

];

页面显示就结果如下：

4.表格如何树形展示数据：

:rowSelection="rowSelection">// rowSelection是列表可选择的时候的配置项，后面介绍，带有此选项表格前就会出现可选择的checkbox Name

编辑

const columns =[

{

dataIndex:'name',

key:'name',

align:'left',

slots: { title:'customTitle'}

},

{

title:'操作',

dataIndex:'action',

width:'30%',

scopedSlots: { cust