antd的a-table表格中合并且使用插槽（使用customRender合并出现问题解决方案）

antd的a-table表格中合并且使用插槽问题

1. customRender合并单元格

在antd官方文档中，是由使用customRender方式将单元格合并的方法

data() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        customRender: (text, row, index) => {
          if (index < 4) {
            return <a href="javascript:;">{text}</a>;
          }
          return {
            children: <a href="javascript:;">{text}</a>,
            attrs: {
              colSpan: 5,
            },
          };
        },
      },
      {
        title: 'Age',
        dataIndex: 'age',
        customRender: renderContent,
      },
      {
        title: 'Home phone',
        colSpan: 2,
        dataIndex: 'tel',
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          };
          if (index === 2) {
            obj.attrs.rowSpan = 2;
          }
          // These two are merged into above cell
          if (index === 3) {
            obj.attrs.rowSpan = 0;
          }
          if (index === 4) {
            obj.attrs.colSpan = 0;
          }
          return obj;
        },
      },
      {
        title: 'Phone',
        colSpan: 0,
        dataIndex: 'phone',
        customRender: renderContent,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        customRender: renderContent,
      },
    ];
    return {
      data,
      columns,
    };
  }

效果如下

使用customRender方式确实可以对表格进行特殊处理，像此处就进行单元格合并操作，但很多操作必须在单元个中插入组件的操作,举例,如下图所示

  {
    title: '详细操作',
    dataIndex: 'content',
    scopedSlots: {customRender: 'operation'},
    align: 'center',
    customRender: (text, row, index) => {
      return { // 否则以独占4列的文本形式被渲染
        children: text,
        attrs: {
          rowSpan: row.row
        }
      }
    }
  }

<a-table :columns="columnsRuleInfoChild" :data-source="dataRuleChild" class="info-rule">
<template slot="operation" slot-scope="text, record">
            <a-button @click="onShowChildRuleInfo(record.AbnormalWarnInfo)" type="link"
                      style="background-color: rgba(0, 0, 0, 0);display: inline-block;float: none">
              <a-icon
                  type="diff"/>
              子集条件
            </a-button>
            <a-button @click="onSelectChooseWarnRule(record)" type="link"
                      style="background-color: rgba(0, 0, 0, 0);display: inline-block;float: none">
              <a-icon
                  type="select"/>
              确认
            </a-button>
</a-table>

如果用过的人可以知道，此处的表头详细操作确实跨行合并了，但是组件内容却并没有重写

再此处可以发现这个地方的插槽 scopedSlots: {customRender: ‘operation’} 方法没有加载组件
因为 customRender: (text, row, index) => {
return {
children: text,
attrs: {
rowSpan: row.row
}
}
}
重载了 scopedSlots: {customRender: ‘operation’}

所以处理方式只能在children的属性中写入，具体如下

customRender: (text, row, index) => {
	·let setTime = setTimeout(()=>{
        let button = document.getElementById("queryChildList");
      	let submit = document.getElementById("submit")
      	button.onclick = function(){
      　　//此处省略
      　　}
      	submit.onclick = function(){
      　　//此处省略
      　　}　
      },100)
      return {
        children: (<a href="#" id='queryChildList'> 子条件集合</a>  <a href="#" id="submit">确认</a>),
        attrs: {
          rowSpan: row.row
        }
      }
    }

但是此操作无法加载vue的组件，只能使用原生的js操作

2. customCell合并

antd在原文档中有这个属性

在文档中的示例却只有如下所示

//customRow 用法 #
//适用于 customRow customHeaderRow customCell customHeaderCell。遵循Vue jsx语法。
<Table
  customRow={(record) => {
    return {
      props: {
        xxx... //属性
      },
      on: { // 事件
        click: (event) => {},       // 点击行
        dblclick: (event) => {},
        contextmenu: (event) => {},
        mouseenter: (event) => {},  // 鼠标移入行
        mouseleave: (event) => {}
      },

    };
  )}
  customHeaderRow={(column) => {
    return {
      on: {
        click: () => {},        // 点击表头行
      }
    };
  )}
/>

再没有多余阐述中，你没有看错，没有其他说明了，当时就想问候写文档人的亲戚了。。。

在我深入底层源码中，我找到了这个属性对应适用的字段

示例

{
    title: '选额内容',
    align: 'center',
    dataIndex: 'row',
    scopedSlots: {customRender: 'row'},
    customCell: ((record, rowIndex) => {
      return {
        style: {display: record.row === 0 ? 'none' : undefined},
        attrs: {
          rowSpan: record.row,
        }
      }
    })
  }

	<a-radio-group v-model="selectedRowKeys" style="width: 100%">
          <a-table :columns="columnsCheckConfig" :data-source="dataCheckData" class="info"
                   rowKey="contentId"
          >
            <template slot="row" slot-scope="text, record">
              <a-radio :value="record.id"></a-radio>
            </template>
          </a-table>
        </a-radio-group>

这样就可在operation这个列中使用它从插槽

效果如下图所示

初出茅庐，有错误还请纠正