ant design vue嵌套表格及表格内部编辑的用法说明

Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，是蚂蚁金服开源的一款 UI 组件库，主要目的是为开发人员提供高质量的企业级 UI 组件，支持 react、vue 以及 angular 三个框架。Ant Design Vue 组件库包含众多组件，如按钮、输入框、表格、弹窗、菜单等，最为优秀的一个组件就是表格。在表格中，Ant Design Vue 组件库支持表格的嵌套和编辑功能。

表格的嵌套

Ant Design Vue 中的表格组件支持嵌套功能，在表格中内嵌表格。这个功能对于具有父子关系的数据非常有用，例如公司与员工的关系可以用嵌套表格展示。

实现一个嵌套表格，需要在 columns 中加入 scopedSlots，然后在 scopedSlots 中定义内部表格的 columns 和数据，示例代码如下：

<template>
  <a-table :columns="columns" :data-source="data">
    <template v-slot:title>列表标题</template>
    <template v-slot:expanded-row="record">
      <a-table :columns="secondColumns" :data-source="record.children"></a-table>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' },
      ],
      secondColumns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          children: [
            {
              key: '11',
              name: 'Jim Green',
              age: 42,
              address: 'London No. 2 Lake Park',
            },
            {
              key: '12',
              name: 'Joe Black',
              age: 32,
              address: 'Sidney No. 3 Lake Park',
            },
          ],
        }
      ],
    }
  },
}
</script>

表格内部编辑

Ant Design Vue 组件库中的表格还支持表格内部的编辑功能。编辑功能可以让我们极其方便地进行单元格或整行的编辑操作。

实现一个支持表格内部编辑的表格，需要在 columns 中加入 scopedSlots，并在 slot 中加入对应的编辑组件。Ant Design Vue 组件库已经提供了一些方便的表格编辑组件，如 Input、Select 和 DatePicker 等。

示例代码如下：

<template>
  <a-table :columns="columns" :data-source="data" :row-key="record => record.id" row-class-name="editable-row">
    <template v-slot:title>列表标题</template>
    <template v-slot:name="scope">
      <a-input :value="scope.row.name" @change="handleChange(scope, 'name')" />
    </template>
    <template v-slot:age="scope">
      <a-input :value="scope.row.age" @change="handleChange(scope, 'age')" />
    </template>
    <template v-slot:address="scope">
      <a-input :value="scope.row.address" @change="handleChange(scope, 'address')" />
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' }  },
        { title: 'Age', dataIndex: 'age', key: 'age', scopedSlots: { customRender: 'age' } },
        { title: 'Address', dataIndex: 'address', key: 'address', scopedSlots: { customRender: 'address' } },
        { title: 'Action', dataIndex: '', key: 'action', scopedSlots: { customRender: 'action' } },
      ],
      data: [
        { id: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
        { id: 2, name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park' },
        { id: 3, name: 'Joe Black', age: 18, address: 'Sidney No. 1 Lake Park' },
      ],
    }
  },
  methods: {
    handleChange(scope, field) {
      const { row } = scope
      row[field] = scope.$event.target.value
    },
    save(record) {
      console.log(record);
    },
  },
}
</script>

上述代码实现了一个支持编辑的表格，当用户点击单元格时，单元格中显示对应的编辑组件，用户可以通过编辑组件编辑单元格的值。同时，表格中的每一行还有一个操作列，操作列中包含了保存按钮，用户可以通过保存按钮保存行中的数据，并且将保存后的数据记录到控制台中。