AntDesignVue的表格Table全选时自定义的禁用行被选上,最后几行没禁用的没选上问题

关键点在于获取Table的数据源中每一行的数据中要有一个属性key,key的值必须是唯一的,这个字段可以在获取table数据源之后通过for循环新增一个key属性字段,关键的代码示例如下:

<template>
  <div>
    <!-- 列表 -->
    <a-table  :data-source="tableSource" :columns="columns" :pagination="false" :row-selection="rowSelection" :loading="tableloading">
        <template slot="shsfqr" slot-scope="text, record">
            <a-tag color="pink" v-if="record.BillStatus==0">未确认</a-tag>
            <a-tag color="green" v-if="record.BillStatus==1">已确认</a-tag>
        </template>
    </a-table>

  </div>
</template>

<script>
import {apiList1} from "@api/yizhifu"
  export default {
    name: 'ceshi1',
    data () {
      return {
          tableSource:[],//表格数据源
          columns:[
            {
              title: '房间号',
              dataIndex: 'rmno',
              align:"center",
              width: 100,
            },
            {
              title: '实收金额',
              dataIndex: 'ActualPayMoney',
              align:"center",
              width: 100,
            },
            {
              title: '支付类型',
              dataIndex: '支付类型',
              align:"center",
              width: 100,
            },
            {
              title: '实收是否确认',
              dataIndex: 'BillStatus',
              align:"center",
              scopedSlots: { customRender: 'shsfqr' },
              width:120,
            },
            {
              title: '外部支付订单号',
              dataIndex: 'Externalordernumber',
              align:"center",
              width: 200,
            },
          ],//表格每一列
          tableloading:false,//table加载中效果,默认没有加载中
          selectedRowKeys:[],//选中的行在表格数据源的下标值集合
          selectedRows:[],//选中的行的对象集合
          

      }
    },
    created() {
        this.getList();//获取列表
    },
    computed: {
      //表格的列选择发生改变
      rowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            this.selectedRowKeys=selectedRowKeys;//选中的行在表格数据源的下标值集合
            this.selectedRows=selectedRows;//选中的行的对象集合
          },
          getCheckboxProps: record => ({
            props: {
              disabled: record.BillStatus==='1', // BillStatus==1不可选
              name: record.BillStatus,
            },
          }),
        };
      },
      
    },
    methods: {
      //获取列表
      getList(){
        this.tableloading=true;//显示表格加载中效果
        apiList1().then(res=>{
            console.log("1-获取列表res:",res)
            this.tableloading=false;//关闭表格加载中效果
            if(res.code==200){
              let arr1=res.result;//列表
              for(let i=0;i<arr1.length;i++){
                arr1[i].key=i
              }
              console.log("列表新增key字段后的arr1:",arr1)
              this.tableSource=arr1;//表格数据源赋值
              
            }else{
              this.$message.error(res.message);//错误提示
            }
            
        })
      },
      
    }
  }
</script>
<style scoped>

</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值