vxe-table 将勾选的数据console.log打印出来
时间: 2023-10-12 17:09:25 浏览: 262
如果你使用的是 vxe-table 的基础版,可以在表格的 `checkbox-change` 事件中获取勾选的数据并打印出来。示例代码如下:
```html
<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>
```
```javascript
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` 方法获取所有勾选的数据。示例代码如下:
```html
<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>
```
```javascript
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);
}
}
};
```
阅读全文