antd vue 表格rowSelection选择框功能的使用

最新推荐文章于 2023-09-21 11:15:42 发布

葬心啊

最新推荐文章于 2023-09-21 11:15:42 发布

阅读量1k

点赞数

分类专栏：前端 html 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_54849873/article/details/123250655

版权

前端同时被 2 个专栏收录

44 篇文章 3 订阅

订阅专栏

html

44 篇文章 1 订阅

订阅专栏

html部分：

<a-table
        :columns="columns"
        :data-source="showList"
        :row-selection="rowSelection"
        :rowKey="record=>record.id"
      />

功能部分：

computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.dataListSelectionKeys,
        onChange: (selectedRowKeys, selectedRows, event) => {
         	//selectedRowKeys 为你点击选框时这一页选中的所有key
         	//selectedRows 为你点击选框时这一页选中的所有数据
        },
        onSelect: (record, selected, selectedRows, nativeEvent) => {
          //record 点击某一条的所有数据
          //selected 点击的一条是否被选中
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          //selected 点击全选是否选中
          //selectedRows 点击全选判断所有的选中数据
          //changeRows 所有改变选中状态的数据
        },
        getCheckboxProps: record => ({
          props: {
            // 全部默认禁止选中
            // disabled: true,
            // 某几项默认禁止选中(R: 当state等于1时)
            // disabled: record.state == 1,
            // 某几项默认选中(R: 当state等于1时)
            defaultChecked: record.state === 1
          }
        })
      }
    }
  }