[JavaScript知识库]记录 ant a-table 表格合并且绑定点击事件

表格合并

<a-table bordered 
:columns="addSupportColumns" // 标题
:dataSource="addSupportDataSource2" // 内容
>
/** 一
	后台返回数据格式 
	this.addSupportDataSource1=[
		{
			..... ,
			data: []
		}
	]
*/
      // 修改合并表格的数据 二
      async convertTableData(){
        let data=this.addSupportDataSource1
        let arr=[]
        let rowSpan=[]
        data.forEach((item)=>{
          for(let i=0;i<item.data.length;i++){
            let rdata={
              ...item,
              ...item.data[i]
            }
            rdata.combineNum=item.data.length
            delete rdata.data
            arr.push(rdata)
            if(i==0){
              rowSpan.push(item.data.length)
            }else{
              rowSpan.push(0)
            }
          }
        })
        this.addSupportDataSource2=arr
        this.rowSpanColumns=rowSpan
        console.log(arr);
        console.log(rowSpan);
      },
// 标题 可在函数中设置  可在javascript中直接const 设置 三
/**
	此处在请求后台数据且
	调用 convertTableData() 函数后处理 表格合并 this.addSupportColumns
*/ 
this.addSupportColumns =[
	{  //  选择框 
              title: ()=>{  // 表头选择框 vue渲染函数v-nodel的等效写法vModel_trim
                const obj=<div><a-checkbox vModel_trim={this.Acheckbox} onClick={()=>{this.indeterminateAcheckbox()}}></a-checkbox></div>
                return obj
              },
              width: 90,
              customRender: (value, row, index) => { // 表格内部
                // console.log(value, row, index);
                const obj={
                  children: (<div><a-checkbox vModel_trim={row.checkAll} onClick={()=>{this.onChangeCheckAll(row)}}></a-checkbox></div>),
                  attrs: {},
                }
                  this.rowSpanColumns.map((item,i)=>{ //  动态需要合并的行数 需要计算
                    if(index==i){
                      obj.attrs.rowSpan=item
                    }
                  })
                  return obj;
              }
            },
            {  //  表格内按钮
              title: "操作",
              scopedSlots: {customRender: 'action'},
              width: 90,
                customRender: (value, row, index) => {
                  // console.log(value, row, index);
                  let obj ={}
                  if(this. $route.path !== '/SupportSingle1' && (this.drawerType == 2 || this.drawerType ==1)){ // 判断条件 删除按钮是否展示
                    obj = {
                      children: (<div><a href="#" size="small" onClick={()=>{this.getDetail(row)}}>查看</a>  <a href="#" size="small"  onClick={()=>{this.deleteZyd(row)}} disabled={this.justLook.indexOf('onlyLook') > -1}>删除</a></div>),
                      attrs: {},
                    };
                  }else{
                    obj = {
                      children: (<div><a href="#" size="small" onClick={()=>{this.getDetail(row)}}>查看</a></div>),
                      attrs: {},
                    };
                  }
                  this.rowSpanColumns.map((item,i)=>{  //  动态需要合并的行数 需要计算
                    if(index==i){
                      obj.attrs.rowSpan=item
                    }
                  })
                  return obj;
                },
            },{ //  正常合并的
              title: "项目名称",
              dataIndex: "RELATED_SUB_PROJECT_NAME",
              width: 250,
              key:"RELATED_SUB_PROJECT_NAME",
                customRender: (value, row, index) => {
                  // console.log(value, row, index);
                  const obj = {
                    children: value,
                    attrs: {},
                  };
                  this.rowSpanColumns.map((item,i)=>{
                    if(index==i){
                      obj.attrs.rowSpan=item
                    }
                  })
                  return obj;
                },
            },{ // 不合并的
                title: "是否质量满足",
                dataIndex: "isMeetQuality",
                width: 100
              }
]