ant-design-vue嵌入html,ant-design-vue 快速避坑指南(推荐)

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。

本文主要目的是总结一些开发过程中比较耗时间去查找，文档中没有具体说明的常见问题，同时希望能给新上手此框架的同学提供一些参考作用。

1.Table对接后台返回数据

针对Table数据格式与后他接口返回数据格式不一致问题，修改 `@/components/table/index.js` 132行起

主要修改pageNo,pageSize,totalCount,data这字段与后台返回字段一致就OK了

result.then(r => {

this.localPagination = Object.assign({}, this.localPagination, {

current: r.pageNo, // 这里修改当前分页字段

total: r.totalCount, // 这里修改总记录数字段

showSizeChanger: this.showSizeChanger,

pageSize: (pagination && pagination.pageSize) ||

this.localPagination.pageSize // 这里修改总记录数当前页数字段

})

//r.data中的data修改为返回列表字段

if (r.data.length == 0 && this.localPagination.current != 1) {

this.localPagination.current--

this.loadData()

return

}

!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)

this.localDataSource = r.data // 返回结果中的数组数据

this.localLoading = false

});

2.table操作栏参数问题

在table的dataSource中指定的每一个数据中，都必须包含有name为key的对象，而显示出的数据就是相应key对应的数据，dataIndex就用来声明列数据在数据项中对应的key

然而在操作列中，我们一般需要传入不知一项数据,试了一下如下图配置dataIndex，数据并不能正确传入slot-scope中

columns: [

...

{

title: '操作',

dataIndex: 'id,text',

key: 'id',

scopedSlots: { customRender: 'operation' }

}

多尝试后发现，其实只要不配置dataIndex就好了。。。slot-scope自定义一个字段，自然就拿到了整行数据

3.table分页组件展示条数

:pagination="