ant design vue 表格table 默认勾选几项的操作

Ant Design Vue 表格（Table）默认勾选几项的操作，可以通过在表格数据中为需要默认勾选的行数据添加一个 selected 属性，并且在表格操作栏添加一个全选按钮，并将其与表格的 rowSelection 属性绑定起来即可实现。

以下是完整的实现步骤：

1. 设置表格数据源

首先，需要设置表格的数据源，可以使用一个数组对象来模拟，示例代码如下：

data(){
  return {
    tableData: [
      {
        id: 1,
        name: '张三',
        age: 20,
        gender: 'male',
        selected: false  // 是否勾选
      },
      {
        id: 2,
        name: '李四',
        age: 21,
        gender: 'female',
        selected: true
      },
      {
        id: 3,
        name: '王五',
        age: 22,
        gender: 'male',
        selected: true
      }
    ]
  }
}

上述代码中，每个表格行数据包含一个 selected 属性，用来表示是否需要默认勾选，初值为 false 或 true。

1. 设置表格属性

接下来，需要设置表格的属性，包括 columns、dataSource、rowSelection 等，示例代码如下：

<template>
  <a-table
    :columns="columns"
    :dataSource="dataSource"
    :rowSelection="rowSelection">
    <span slot="title">
      <a-checkbox
        :indeterminate="indeterminate"
        :checked="checkAll"
        @change="checkAllChange">
        全选
      </a-checkbox>
    </span>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        },
        {
          title: '性别',
          dataIndex: 'gender'
        }
      ],
      dataSource: [],
      selectedRowKeys: [],
      checkAll: false,
      indeterminate: false
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        getCheckboxProps: record => ({
          disabled: record.name === '李四'
        })
      }
    }
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      this.checkAll = selectedRowKeys.length === this.tableData.length
      this.indeterminate =
        !this.checkAll && selectedRowKeys.length > 0
    },
    checkAllChange(e) {
      const checked = e.target.checked
      this.checkAll = checked
      this.indeterminate = false
      this.selectedRowKeys = checked
        ? this.tableData.map(item => item.id)
        : []
    }
  },
  mounted() {
    this.dataSource = this.tableData.map(item => ({
      ...item,
      key: item.id
    }))
    this.selectedRowKeys = this.tableData
      .filter(item => item.selected === true)
      .map(item => item.id)
  }
}
</script>

上述代码中，columns 定义了表格列，dataSource 定义了表格数据源，rowSelection 表示表格是否可以选择行，并绑定了一些事件。（需要注意的是，checkAll、indeterminate、selectedRowKeys 等变量都需要定义在 data 中。）

1. 初始化数据

在 mounted 生命周期中，需要将表格数据源转换为表格可以直接使用的格式，并将需要默认勾选的行数据的 id 值存入 selectedRowKeys 数组中，示例代码如下：

mounted() {
  this.dataSource = this.tableData.map(item => ({
    ...item,
    key: item.id
  }))
  this.selectedRowKeys = this.tableData
    .filter(item => item.selected === true)
    .map(item => item.id)
}

以上就是 Ant Design Vue 表格默认勾选几项的操作的完整攻略，示例代码中，已经实现了全选和部分勾选的逻辑。如果需要实现其他功能，可以根据具体的需求做相应的修改。