如何获取vxe-table当前已勾选数据

在VxeTable这个Vue表格组件中，要获取当前已勾选的数据，你可以通过监听`@check-change`事件。这个事件会在用户选择或取消选择表单中的选项时触发，返回一个数组，包含所有被选中的行数据。

下面是一个简单的例子：

<template>
  <vxe-table :data="tableData" @check-change="handleCheckedChange">
    <!-- 表格配置 -->
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      selectedData: []
    };
  },
  methods: {
    handleCheckedChange(data) {
      this.selectedData = data; // 数据会被添加到selectedData数组中
    }
  }
};
</script>

在这个示例中，`handleCheckedChange`函数会接收到一个包含已勾选行数据的数组，并将其保存到`selectedData`属性中。你可以根据需要进一步处理这些数据。

相关问题

如何在vxe-table checkbox 列勾选

在vxe-table中，可以通过以下步骤来实现checkbox列的勾选：

1. 首先，在表格的列定义中，需要设置对应列的type为"checkbox"，并且设置prop属性为一个唯一的标识符，用于区分不同的数据行。

2. 在数据源中，为每一行数据添加一个属性，用于表示该行是否被选中。可以使用v-model指令将该属性与checkbox列进行双向绑定。

3. 在表格的checkbox列中，可以使用slot-scope来自定义列的内容。可以通过判断当前行的选中状态，来显示不同的勾选状态。

下面是一个示例代码：

<template>
  <vxe-table :data="tableData">
    <vxe-table-column type="checkbox" prop="selected"></vxe-table-column>
    <vxe-table-column field="name" title="姓名"></vxe-table-column>
    <vxe-table-column field="age" title="年龄"></vxe-table-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, selected: false },
        { name: '李四', age: 25, selected: true },
        { name: '王五', age: 30, selected: false }
      ]
    };
  }
};
</script>

在上述代码中，tableData数组中的每个对象都有一个selected属性，用于表示该行是否被选中。通过设置type为"checkbox"的列，并将prop属性设置为"selected"，实现了checkbox列的勾选功能。

vxe-table 将勾选的数据console.log打印出来

如果你使用的是 vxe-table 的基础版，可以在表格的 `checkbox-change` 事件中获取勾选的数据并打印出来。示例代码如下：

<vxe-table :data="tableData" @checkbox-change="handleCheckboxChange">
  <vxe-column type="checkbox"></vxe-column>
  <vxe-column field="name" title="Name"></vxe-column>
  <vxe-column field="age" title="Age"></vxe-column>
</vxe-table>

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        { name: 'Bob', age: 40 }
      ],
      checkedRows: []
    };
  },
  methods: {
    handleCheckboxChange(checkedRows) {
      this.checkedRows = checkedRows;
      console.log('勾选的数据：', checkedRows);
    }
  }
};

如果你使用的是 vxe-table 的高级版或专业版，则可以使用 `getCheckboxRecords` 方法获取所有勾选的数据。示例代码如下：

<vxe-table ref="xTable" :data="tableData">
  <vxe-column type="checkbox"></vxe-column>
  <vxe-column field="name" title="Name"></vxe-column>
  <vxe-column field="age" title="Age"></vxe-column>
</vxe-table>

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        { name: 'Bob', age: 40 }
      ]
    };
  },
  methods: {
    handleButtonClick() {
      const checkedRows = this.$refs.xTable.getCheckboxRecords();
      console.log('勾选的数据：', checkedRows);
    }
  }
};