ant design vue2 表格复选框

Ant Design Vue2 表格复选框需要在表格中添加一个 `Column`，并设置其 `type` 属性为 `'selection'`，如下所示：

<a-table :columns="columns" :data-source="data">
  <!-- 添加 selection 类型的 Column -->
  <a-table-column type="selection" width="50"></a-table-column>

  <!-- 其他的 Column -->
  <a-table-column title="姓名" dataIndex="name"></a-table-column>
  <a-table-column title="年龄" dataIndex="age"></a-table-column>
  <a-table-column title="性别" dataIndex="gender"></a-table-column>
</a-table>

然后，在表格中就会显示一个复选框列，用户可以通过勾选复选框来选择相应行的数据。如果需要获取用户选择的数据，可以使用 `getSelectedRows()` 方法来获取选中的行数据，如下所示：

const selectedRows = this.$refs.table.getSelectedRows();
console.log(selectedRows);

相关问题

ant design vue2表格复选框全选处添加文字

在 Ant Design Vue2 表格中，可以通过设置 `row-selection` 属性来为表格添加复选框。如果需要为复选框全选处添加文字，可以在 `row-selection` 属性中设置 `checkStrictly` 和 `renderCell` 两个属性。具体做法如下：

1. 在 Table 组件中设置 `row-selection` 属性，其中 `checkStrictly` 属性用于控制是否严格检查复选框的选中状态，`renderCell` 属性用于渲染复选框列，并在全选处添加文字。

<template>
  <a-table :columns="columns" :data-source="data" row-selection="{checkStrictly: true, renderCell: renderSelection}">
  </a-table>
</template>

2. 在 `methods` 中定义 `renderSelection` 方法，用于渲染复选框列和全选处文字。在 `renderSelection` 方法中，先根据 `record` 和 `index` 判断当前行是否可选，然后根据 `record` 的 `selected` 属性确定复选框的选中状态，最后在全选处添加文字。

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '',
          dataIndex: 'checkbox',
          width: '50px'
        },
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age'
        }
      ],
      data: [
        {
          id: '1',
          name: 'John Brown',
          age: 32,
          selected: false
        },
        {
          id: '2',
          name: 'Jim Green',
          age: 42,
          selected: false
        },
        {
          id: '3',
          name: 'Joe Black',
          age: 32,
          selected: false
        }
      ]
    };
  },
  methods: {
    renderSelection(h, { record, index }) {
      const selectable = !record.disabled;
      const selected = record.selected;
      return (
        <div class="selection-cell">
          <a-checkbox
            value={record.id}
            disabled={!selectable}
            checked={selected}
            on-change={(e) => this.handleSelectionChange(e, record)}
          ></a-checkbox>
          {index === 0 && (
            <span class="selection-all">
              {this.isAllSelected() ? '取消全选' : '全选'}
            </span>
          )}
        </div>
      );
    },
    isAllSelected() {
      return this.data.every((item) => item.selected);
    },
    handleSelectionChange(e, record) {
      record.selected = e.target.checked;
    }
  }
};
</script>

<style scoped>
.selection-cell {
  display: flex;
  align-items: center;
}
.selection-all {
  margin-left: 10px;
  color: #1890ff;
  cursor: pointer;
}
</style>

这样就可以为表格的复选框全选处添加文字了。需要注意的是，如果需要获取选中的行，可以通过 `this.data.filter(item => item.selected)` 来获取。

ant design vue2 表格复选框怎么判断数据是选中状态

在 Ant Design Vue2 表格中，可以使用 `rowKey` 属性来指定每行数据的唯一标识，然后在 `selection-change` 事件中获取选中的行数据和取消选中的行数据，如下所示：

<a-table :columns="columns" :data-source="data" row-key="id" @selection-change="handleSelectionChange">
  <a-table-column type="selection" width="50"></a-table-column>
  <a-table-column title="姓名" dataIndex="name"></a-table-column>
  <a-table-column title="年龄" dataIndex="age"></a-table-column>
  <a-table-column title="性别" dataIndex="gender"></a-table-column>
</a-table>

在 `handleSelectionChange` 方法中，可以通过遍历选中的行数据，判断是否在已选中的数组中存在，从而判断该行数据是否被选中，如下所示：

handleSelectionChange(selectedRows) {
  const selectedIds = this.selectedRows.map(row => row.id);
  selectedRows.forEach(row => {
    if (selectedIds.includes(row.id)) {
      row.selected = true;
    } else {
      row.selected = false;
    }
  });
  this.selectedRows = selectedRows;
}

在上面的代码中，`selectedRows` 是当前选中的行数据数组，`selectedIds` 是已选中的行数据的 id 数组，通过遍历 `selectedRows` 数组，可以判断当前行数据是否被选中，并将选中状态保存在 `selected` 属性中。最后将选中的行数据数组保存在 `selectedRows` 变量中，以便其他地方获取。