【vxe-table】复选框设置为单选，隐藏表头复选框_vxe-table隐藏表头

vxe-table和el-table有些许不同

el-table复选框只允许点击单选的话，可以这样

   @row-click="rowClick"
 // 点击选中
    rowClick(row) {
      // 单选
      if (!this.multiple) {
        if (this.$refs.standTables.selection.length >= 1) {
          this.$refs.standTables.selection.length = 1
        }
        this.$refs.standTables.selection.shift()
      }
      this.row = row
      this.$refs.standTables.toggleRowSelection(row)
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

vxe-table的话稍稍麻烦些
首先要加配置项checkbox-config，触发方式为row，才会点击行勾选当前行的复选框选中状态

 <vxe-table
   ref="invoiceVxeTable"
 :checkbox-config="{ checkField: 'checked', trigger: 'row' }"
 
   @checkbox-change="selectEvent"
    >
1
2
3
4
5
6

//单选
  selectEvent(data) {
      let row = data.row
      this.invoiceRow = data.row
      let isSelect = this.$refs.invoiceVxeTable.isCheckedByCheckboxRow(row)
      this.$refs.invoiceVxeTable.setAllCheckboxRow(false)
      this.$refs.invoiceVxeTable.setCheckboxRow(row, isSelect)      
    },
1
2
3
4
5
6
7
8

我这有个tab切换，每个tab都是一个列表，切换回来的时候，勾选的状态还要在
所以在tab的tab-click事件中，再处理一下

 <el-tabs v-model="type" @tab-click="handleChange" type="card" >
1

 handleChange(tab, event) {
      if (tab.name == 'Detail') {
       .................
      } else if (tab.name == 'MailingInfo') {
       ....................
      } else {
      //如果直接这样写 this.$refs.invoiceVxeTable.toggleCheckboxRow(this.invoiceRow),会不起作用
        this.$nextTick(() => {
          if (this.$refs.invoiceVxeTable) {
            let index = this.masterList.findIndex(item => item.invoiceNo ==    
                	this.invoiceRow.invoiceNo)
            this.$refs.invoiceVxeTable.toggleCheckboxRow(this.masterList[index])
          }
        })
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5月6号更新：

如果要单选并且表头的复选框不允许多选，可以css手动控制复选框隐藏

/deep/ .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--unchecked-icon {
  display: none !important;
}
/deep/ .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--indeterminate-icon {
  display: none !important;
}
1
2
3
4
5
6

如果只要表头隐藏，不控单选的话，可以在checkbox-config配置中加 checkStrictly: true，设置父子节点不互相关联，不太好用

  :checkbox-config="{ checkField: 'checked', trigger: 'row' ，checkStrictly: true}"
1

还有checkMethod方法，会使所有列都禁用，如何只禁表头复选框，还没实现，待更新~~~