Question

我正在尝试自定义一个表，以便最后一列跨越所有行，而且不仅要打印dataIndex，还要使用模板槽。

文档中关于customRender的内容如下：

表格单元格的渲染器。返回值应为VNode或colSpan / rowSpan配置的对象 Function(text, record, index) {}|slot-scope

使用scopedSlot和customRender，让我按照文档所述使用该插槽

{
   title: "Description",
   dataIndex: "descr",
   scopedSlots: { customRender: "descr" }
}

<template slot="descr" slot-scope="value">
  {{value}}
</template>

有了这个，rowSpan可以正常工作

{
  title: 'Description',
  dataIndex: 'descr',
  customRender: (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  };
  if (index === 0) {
    obj.attrs.rowSpan = 10;
  }
  else {
    obj.attrs.rowSpan = 0;
  }
  return obj;
}

所以目前我正试图将两者结合都没有成功

const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  };
  if (index === 0) {
    obj.attrs.rowSpan = 10;
    obj.attrs.align = 'middle';
    obj.attrs.width = 900;
    // obj.attrs.customRender = 'test'
    // obj.customRender = 'test'
    // obj.attrs.scopedSlots = { customRender: 'test' }
    // obj.scopedSlots = { customRender: 'test' }
    // obj.attrs.slots = { customRender: 'test' }
    // obj.slots = { customRender: 'test' }
    // obj.attrs.slots = { customRender: 'test' }
    obj.attrs.fixed = 'left'
  }
  // These two are merged into above cell
  else {
    obj.attrs.rowSpan = 0;
  }
  return obj;
};

 columnasPrestaciones: [
      {
        title: "Percepción",
        dataIndex: "Percepcion"
      },
      {
        title: "Clave",
        dataIndex: "Clave"
      },
      {
        title: "Fiscal",
        dataIndex: "Fiscal"
      },
      {
        title: "Importe",
        dataIndex: "Importe",
        customRender: renderContent
      }
    ],

Answer 1

您尝试过吗？

components-table-demo-colspan-and-rowspan

在此示例中：children（VNode）和colSpan在同时工作。

const columns = [
  {
    customRender: (text) => {
      return {
        children: <a href="javascript:;">{text}</a>,
        attrs: {
          colSpan: 5,
        },
      };
    },
  },
];

在表格组件中，有一种方法可以使用customRender设置插槽名称和rowSpan

1 个答案: