element table控件的checkout复选框，只能默认选中一个，并且点击发送请求。

Posted 2021-08-09 晚星@

vue

复选框的 label-class-name 属性

设置复选框 表头的进行隐藏，表头的复选框变成汉字

                         <el-table-column type="selection"
                             width="60"
                             label-class-name="DisabledSelection"
                             align="center"
                             :reserve-selection="true"></el-table-column>

script

数据渲染完进行复选框的默认选中

  // checkout 默认选中
    toggleSelection (rows) {
      let that = this;
      if (rows) {
        rows.forEach((item) => {
          //设置该表格选框选中
          if (item.isMain == 1) {
            that.$refs.multipleTable.toggleRowSelection(item);
          }
        });
      } else {
        that.$refs.multipleTable.clearSelection();
      }
    },

表格 table 默认的 @selection-change=“handleSelectionChange” 属性

   handleSelectionChange (val) {
      if (val.length >= 2) {
        // 删除索引为0的
        // console.log(val.splice(0,val.length-1),'被删除的')
        let arrays = val.splice(0, val.length - 1)
        arrays.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row); //除了当前点击的，其他的全部取消选中
        })
      } else {
      	// 只有一个长度的时候进行改变事件的请求
        var isMain = null
        if (val[0].isMain == 1) {
          isMain = 0
        } else {
          isMain = 1
        }
        var params = {
          id: val[0].id,
          isMain: isMain
        }
        baseUnitDetailupdateById(params).then(res => {
          this.$message.success(res.message)
          // this.getListDetail()
        })
      }
      // console.log(val, '最后得到的')this.array = val
    },

style

/*表格表头全选*/
::v-deep .DisabledSelection .cell .el-checkbox__inner {
  margin-left: 530px;
  position: relative;
}
::v-deep .DisabledSelection .cell:before {
  content: "主单位";
  color: #909399;
  position: absolute;
  right: 11px;
}

最终效果如下