欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue-ant-design如何点中行后并勾选他的复选框

程序员文章站 2022-05-31 18:47:44
...

1.首先我们需要明白,复选框的勾选是和selectedRowKeys这个属性有关系的
2.获取选中行的数据和table的customRow这个属性有关系,如下
vue-ant-design如何点中行后并勾选他的复选框
vue-ant-design如何点中行后并勾选他的复选框
如何点击行触发选择行为,官网也有做了说明:https://codesandbox.io/s/000vqw38rl
vue-ant-design如何点中行后并勾选他的复选框
或者可以参考这个博客:https://blog.csdn.net/qq_35331167/article/details/90174428

---------------------------------------------分割号-----------------------------------------------------
我是基于分装好 的stable上进行操作的,所以有些地方可能会有出入

selectedRowKeys: [], selectedRows: [], optionss: { alert: { show: true, clear: () => { this.selectedRowKeys = [] } }, rowSelection: { selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange } }, optionAlertShow: falsevue-ant-design如何点中行后并勾选他的复选框
vue-ant-design如何点中行后并勾选他的复选框

 :customRow="setRow"

vue-ant-design如何点中行后并勾选他的复选框

 setRow(record) {
        return {
          on: {
            click: () => {
              let flag = false
              let keys = []
              keys = this.selectedRowKeys
              if (keys.indexOf(record.IDS) >= 0) {
                flag = true
              }
              if (flag) {
                keys.splice(keys.findIndex(item => item === record.IDS), 1)
                this.selectedRows.splice(this.selectedRows.findIndex(item => item === record.IDS), 1)
              } else {
                keys.push(record.IDS)
                this.selectedRows.push(record)
              }
              this.$refs.table.selectmyRorKey(keys)
              this.optionss = {
                rowSelection: {
                  selectedRowKeys: this.selectedRowKeys,
                  onChange: this.onSelectChange
                }
              }
              /* 如果需要拿到选中的数据,可以把这个打印出来看下
              console.log('这里是选中的数据='+JSON.stringify(this.selectedRows))
             */
            }
          }
        }
      },

vue-ant-design如何点中行后并勾选他的复选框

 //给ids序号赋值
            let z = 0
            for (let i = 0; i < data.page.list.length; i++) {
              console.log('i=' + i)
              data.page.list[i].IDS = z
              z += 1
            }
``