antd vue table自定义问题

img


antd vue 嵌套表格的话怎么同时满足打开description和单选 并且单选在展开按钮的前面呢。 展开按钮自定义都api嘛

要在具有嵌套行的 antd vue 表中实现这一点，您可以执行以下操作：

  • 为单选按钮定义自定义列，使用renderprop 为单选按钮指定 HTML。
  • 使用expandabletable 的 prop 指定一个自定义函数，为每个展开的父行生成嵌套行。
  • 在生成嵌套行的自定义函数中，使用嵌套行的render属性指定描述单元格的HTML。

这是一个示例，说明它在 vue 组件的模板中的外观：

<template>
  <a-table :columns="columns" :dataSource="dataSource" :expandable="expandableRow">
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Radio',
          render: (text, record) => (
            <a-radio-group>
              <a-radio value={record.key} />
            </a-radio-group>
          ),
        },
        {
          title: 'Expand',
          render: (text, record) => (
            <a-icon
              type={record.expanded ? 'up' : 'down'}
              class="expand-icon"
            />
          ),
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'Parent 1',
          children: [
            {
              key: '1-1',
              name: 'Child 1',
              description: 'Description for child 1',
            },
            {
              key: '1-2',
              name: 'Child 2',
              description: 'Description for child 2',
            },
          ],
        },
      ],
      expandableRow: (record) => ({
        children: [
          {
            key: `${record.key}-description`,
            name: 'Description',
            render: (text, record) => record.description,
          },
        ],
      }),
    }
  },
}
</script>

这将生成一个表格，第一列有单选按钮，第二列有展开按钮。展开父行时，嵌套行将包含一个描述单元格。当行展开时，单选按钮仍然可见。