ant-design-vue获取table复选框勾选行数据
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)