qq_35331167
梦可由天
2019-05-13 14:57
采纳率: 0%
浏览 4.6k

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))
          }
        }
      }
    }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • qq_41897931
    Nopains__Nogains 2021-02-07 22:26

    :alert="options.alert"  首先把这个去掉 ,

    然后

    :rowSelection="options.rowSelection"换成 这个

    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 

    点赞 1 评论

相关推荐