antdv框架学习各种踩坑记（转载整理其他博主文章）

一、antdv框架a-date-picker只选择年demo

二、antd vue table 嵌套子表格

三、Antd 的vue模态框modal去除确认或添加按钮（自定义按钮）

四、vue中使用qrcode2js插件生成二维码并下载

五、ant design vue:a-select使用v-model后无法选择的解决方法（编辑无法选择）

六、antdv实现图片的上传、预览以及删除功能（没有测试）

七、ant-design-vue Table组件去掉自带分页器

八、a-modal关闭和重写确定、取消

九、ant design vue 嵌套table 的使用以及 expand事件（表格嵌套表格只展示一个，其他关闭）

十、antd 下拉框在选择后视图未更新问题

解决方案
组件添加change事件，在方法中利用this.$forceUpdate()强制刷新数据
	this.$forceUpdate()
this.$nextTick(() => {
	this.$forceUpdate()
})

十一、a-table表格设置某一行禁选

<a-table :rowSelection="rowSelection"/>
computed: {
	rowSelection() {
		const { selectedRowKeys } = this
		return {
			selectedRowKeys, //一定要加上这一行，清楚还会有效果
			onChange: (selectedRowKeys, selectedRows) => {
			this.selectionRows = selectedRows;	//获取选中的值
			this.selectedRowKeys = selectedRowKeys;
			},
			getCheckboxProps: record => ({
				props: {
					disabled: record.ynExamine!=1;	//没有审核按钮权限-禁止选中
				}
			})
		}
	}
},
methods: {
	//选择事件
	onSelectChange(selectedRowKeys, selectionRows) {
		this.selectedRowKeys = selectedRowKeys;
		this.selectionRows = selectionRows;	//选中的数据
	},
}

十二、Ant design table表格解决后台传2个空格，前端只渲染一个空格问题。（解码和编码）

后台列表数据返回什么样子展示什么样子。比如：返回数据有多个空格，前端解析后可能只有一个空格
{
	title: '测试',
	align: 'center',
	dataIndex: 'demo',
	customCell: function(t, r, index) {
		return {style:{'white-space':'pre'}}
	},
},

十三、去除表格（a-table）自带分页功能

:pagination="false"

十四、antd Table 自适应滚动

<a-table ref="table" size="middle" :scroll="{y: 300, x: 200}"

十五、处理表格合并功能

//表头
dataList： [
	{
	   title: '关联区域',
	   dataIndex: 'bfaName',
	   key: 'bfaName',
	   width: 100,
	   align: 'center',
	   customRender: (value, row, index) => {
	     const obj = {
	       children: value,
	       attrs: {},
	     };
	     obj.attrs.rowSpan  = row.rowSpan;
	     return obj;
	   }
	 },
	 {
	   title: '承运商',
	   dataIndex: 'carrierName',
	   key: 'carrierName',
	   width: 100,
	   align: 'center',
	   customRender: (value, row, index) => {
	     const obj = {
	       children: value,
	       attrs: {},
	     };
	     obj.attrs.rowSpan  = row.rowSpan2;
	     return obj;
	   }
	 },
]

//this.data  整体数据  
this.data = this.data.sort((a,b)=>{
   let flag = a.bfaName.localeCompare(b.bfaName,"zh")
   if(!flag) return a.carrierName.localeCompare(b.carrierName,"zh")
   return flag
 })
 // let key1 = ''
 // this.data.forEach(i=>{
   // i.bfaNameLength = this.data.filter(j=>j.bfaName = i.bfaName).length
 // })

// 处理表格合并功能
 let bfaNames = this.data.map(item=>item.bfaName)	//[1,1,1,2,2]
 let obj = {}
 bfaNames.forEach(item=>{
   obj[item] = (obj[item] +1 ) || 1;
 })

 let carrierNames = this.data.map(item=>item.bfaName + item.carrierName )	//[1,1,1,2,2]
 let obj2 = {}
 carrierNames.forEach(item=>{
   obj2[item] = (obj2[item] +1 ) || 1;
 })
 this.data = this.data.map((item,index)=>{
   let weizhi = bfaNames.findIndex((cur)=> cur==item.bfaName)
   if(weizhi==index && obj[item.bfaName]>=1){
     item.rowSpan = obj[item.bfaName]
   }else{
     item.rowSpan = 0
   }


   let weizhi2 = carrierNames.findIndex((cur)=> cur==(item.bfaName + item.carrierName))
   if(weizhi2==index && obj2[item.bfaName + item.carrierName]>=1){
     item.rowSpan2 = obj2[item.bfaName + item.carrierName]
   }else{
     item.rowSpan2 = 0
   }
   return item
 })