【第2节】ant design表格操作自定义

概述

在 ant-design-vue 的 table 组件中，可以通过 rowSelection 属性来实现行选择功能。rowSelection 属性是一个对象，可以配置以下属性：

• selectedRowKeys：已选择的行的 key 数组
• onChange：选中或取消选中行时的回调函数
• getCheckboxProps：根据行数据动态配置复选框的属性
  如果想要自定义 rowSelection，可以通过传递一个对象来配置 rowSelection 的属性。
  下面是一个示例：

<template>
  <a-table :rowSelection="customRowSelection" :columns="columns" :dataSource="data"></a-table>
</template>
>
export default {
  data() {
    return {
      data: [
         selectedRows: [],
         selectedRowKeys: [],
        { key: '1', name: 'John Doe', age: 30 },
        { key: '2', name: 'Jane Smith', age: 25 },
        { key: '3', name: 'Bob Johnson', age: 35 },
      ],
      customRowSelection: {
        selectedRowKeys: [],
        onChange: this.handleRowSelectionChange,
        getCheckboxProps: this.getCheckboxProps,
      },
      columns: [
        { title: 'Name', dataIndex: 'name' },
        { title: 'Age', dataIndex: 'age' },
      ],
    };
  },
  methods: {
    handleRowSelectionChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys,
      this.selectedRows = selectedRows,
      this.customRowSelection.selectedRowKeys = selectedRowKeys;
    },
    getCheckboxProps(record) {
      // 自定义复选框的属性
      return {
        disabled: record.name === 'John Doe',
      };
    },
  },
};
</script>

在上述示例中，我们通过 customRowSelection 对象来自定义 rowSelection。selectedRowKeys 是已选择的行的 key 数组，通过 onChange 方法来更新 selectedRowKeys。getCheckboxProps 方法根据行数据来动态配置复选框的属性，例如在这个示例中，如果行的 name 属性为 ‘John Doe’，则复选框会被禁用。

通过这种方式，你可以根据自己的需求来自定义 rowSelection。
getCheckboxProps 方法用于根据行数据动态配置复选框的属性。它返回一个对象，该对象包含要应用于复选框的属性。

以下是 getCheckboxProps 方法中可以使用的属性：

checked：指定复选框是否被选中。
disabled：指定复选框是否被禁用。
indeterminate：指定复选框是否处于不确定状态。
onChange：复选框状态改变时的回调函数。
onClick：复选框被点击时的回调函数。
onFocus：复选框获得焦点时的回调函数。
onBlur：复选框失去焦点时的回调函数。
onKeyDown：按下键盘按键时的回调函数。
你可以根据需要选择其中的属性来配置复选框。下面是一个示例：

getCheckboxProps(record) {
  // 自定义复选框的属性
  return {
    checked: record.selected,
    disabled: record.disabled,
    indeterminate: record.indeterminate,
    onChange: this.handleCheckboxChange,
    onClick: this.handleCheckboxClick,
    onFocus: this.handleCheckboxFocus,
    onBlur: this.handleCheckboxBlur,
    onKeyDown: this.handleCheckboxKeyDown,
  };
},

在上述示例中，我们根据行数据的属性来配置复选框的属性。例如，checked 属性根据 record.selected 来确定复选框是否被选中，disabled 属性根据 record.disabled 来确定复选框是否被禁用。

通过自定义 getCheckboxProps 方法，你可以根据具体的业务需求来配置复选框的属性，以满足不同的功能和交互要求。

屏蔽默认全选功能

关注我们

关注我，一个只讲解决方案的技术业务博主！！！