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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐