【JEECGBOOT】列表展示金额合计,并复选框禁止选择

Vue中实现表格行禁选功能
文章介绍了一种在Vue应用中使用AntDesignforVue的A-Table组件时,如何通过computed属性设置rowSelection来实现特定行的禁选功能,特别是当记录ID为合计时,自动禁选。此外,还提供了列表代码示例,展示如何处理行选择变化和自定义列显示。

目录

1、方法代码

2、列表代码

3、参考资料

4、代码文件


1、方法代码

computed: {
    rowSelection() {
      const _this = this
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectionRows) => {
          this.selectedRowKeys = selectedRowKeys;
          this.selectionRows = selectionRows;
        },
        getCheckboxProps: (record) => ({
          props: {
            // 全部默认禁止选中
            // disabled: true,
            // 某几项默认禁止选中(R: 当state等于1时)
            disabled: record.id=='合计',
            // 某几项默认选中(R: 当state等于1时)
            // defaultChecked: record.state == 1,
          },
        }),
      }
    },
  },

 

2、列表代码

<!-- table区域-begin -->
<div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="rowSelection"
        @change="handleTableChange">

        <span slot="action_rowIndex" slot-scope="text, record, index">
          <span v-if="record.id=='合计'">
            合计
          </span>
          <span v-else>
            <span v-if="ipagination.current=='1'">{{parseInt(index)}}</span>
            <span v-else>{{parseInt(index)+1}}</span>
          </span>
        </span>
      </a-table>
</div>
<!-- table区域-end -->

3、参考资料

1、antDesignForVue 符合条件的表格复选框禁止选中
https://blog.youkuaiyun.com/bbsyi/article/details/108992302

4、代码文件

说明:后端查询记录后,在计算合计时,合计记录的id赋值为“合计”,可实现该效果。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值