ant-design-vue获取table复选框勾选行数据
a-table获取复选框勾选行数据
·
1、版本1
onSelect、onSelectAll事件并用获取 勾选数组对象
<template>
<div>
<a-table
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:row-key="(record) => record.id"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
onSelect: onSelect,
onSelectAll: onSelectAll,
}"
></a-table>
</div>
</template>
<script>
import { AddLimsPointPageData } from '@/services/LIMSApis/nodeConfig'
export default {
name: 'index',
data() {
return {
// 选中行id数组
selectedRowKeys: [],
// 选中行-对象数组
selectedRows: [],
dataSource: [],
columns: [
{
title: '编码',
dataIndex: 'code',
align: 'center',
},
{
title: '名称',
dataIndex: 'name',
align: 'center',
},
],
}
},
mounted() {
this.AddLimsPointPage()
},
methods: {
async AddLimsPointPage() {
let res = await AddLimsPointPageData(this.params)
this.dataSource = res.data
},
// 勾选触发的函数
onSelectChange(selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
},
/**
* 表格单选事件
* @param record 行数据
* @param selected 是否选中
*/
onSelect(record, selected) {
// 若选中,直接push
if (selected) {
this.selectedRows.push(record)
} else {
// 若取消选中,则查找到这条数据删除
let index = this.selectedRows.findIndex((item) => item.id == record.id)
if (index >= 0) {
this.selectedRows.splice(index, 1)
}
}
},
/**
* 表格多选事件
* @param selected 是否选中
* @param selectedRows 忘记了,当时没用到
* @param changeRows 变化行数据
*/
onSelectAll(selected, selectedRows, changeRows) {
// 若选中,直接push
if (selected) {
// 单选中部分几条数据,此时点击全选,将 changeRows 剩下的几条为选中数据选中
this.selectedRows = this.selectedRows.concat(changeRows)
} else {
// 若取消选中,则为空
this.selectedRows = []
}
},
},
}
</script>
2、版本2
单用onChange事件获取 勾选数组对象
<template>
<div>
<a-table
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:row-key="(record) => record.id"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
></a-table>
</div>
</template>
<script>
import { AddLimsPointPageData } from '@/services/LIMSApis/nodeConfig'
export default {
name: 'index1',
data() {
return {
// 选中行id数组
selectedRowKeys: [],
// 选中行-对象数组
selectedRows: [],
dataSource: [],
columns: [
{
title: '编码',
dataIndex: 'code',
align: 'center',
},
{
title: '名称',
dataIndex: 'name',
align: 'center',
},
],
}
},
mounted() {
this.AddLimsPointPage()
},
methods: {
async AddLimsPointPage() {
let res = await AddLimsPointPageData(this.params)
this.dataSource = res.data
},
/**
* 表格选中方法
* @param selectedRowKeys 当前选中表格的id数组
* @param selectedRows 当前选中表格的对象数组
*/
onSelectChange(selectedRowKeys, selectedRows) {
// 1、单选中某条数据进入
if (selectedRowKeys.length === 1) {
// 4、当前两条数据选中,取消一条选中进入
if (this.selectedRows.includes(selectedRows[0])) {
this.selectedRows = this.selectedRows.filter(
(item) => item.id === selectedRows[0].id
)
this.selectedRowKeys = this.selectedRowKeys.filter(
(item) => item === selectedRows[0].id
)
} else {
// 2、直接push
this.selectedRows.push(selectedRows[0])
this.selectedRowKeys.push(selectedRows[0].id)
}
} else {
// 3、再选中某数据,或全选、全不选进入
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
},
},
}
</script>
更多推荐
已为社区贡献8条内容
所有评论(0)