Ant design vue 表格如何设置选中行进行设置复选框选中效果( 目前完成了百分之九十... 差高人相助 )

这张图点击了几行的数据, 可以看到所选行是有标识的.


图片说明

这张就是点击了一次复选框, 然后电机的第四行, 才能显示选中效果


图片说明

这是代码

<s-table
      ref="table"
      size="default"
      rowKey="key"
      :columns="columns"
      :data="loadData"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
      :customRow="setRow"
    >

data: {
        selectedRowKeys: [],
                    selectedRows: [],

                    // custom table alert & rowSelection
                    options: {
                        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                        rowSelection: {
                            selectedRowKeys: this.selectedRowKeys,
                            onChange: this.onSelectChange
                        }
                    },
                    optionAlertShow: false
                }
        }


setRow (record) {
      return {
        on: {
          click: () => {
            let flag = false
            let keys = []
            keys = this.selectedRowKeys
            if(keys.indexOf(record.id) >= 0) {
                flag=true
            }
            if(flag){
                keys.splice(keys.findIndex(item => item === record.id), 1)
                this.selectedRows.splice(this.selectedRows.findIndex(item => item === record.id), 1)
            } else {
                keys.push(record.id)
                this.selectedRows.push(record)
            }
            // this.options.rowSelection.selectedRowKeys = this.selectedRowKeys
            // this.options.rowSelection.selectedRows = this.selectedRows
            // this.selectedRowKeys = keys
            this.onSelectChange(keys, this.selectedRows)
            console.log(flag)
            console.log(JSON.stringify(this.selectedRowKeys))
          }
        }
      }
    }
qq_35331167
梦可由天 setRow添加 this.options = { rowSelection: { selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange } }
一年多之前 回复
qq_35331167
梦可由天 已经解决, 可看博文
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐