element table组件多选改单选

效果图

表单选.png

1. table组件属性设置

2. 选中事件处理

handleSelectionChange (val) {
    this.multipleSelection = val;
    if (val.length) {
        if (val.length > 1) {
            this.$refs.multipleTable.toggleRowSelection(val[0]);
        }
        this.ruleForm.userName = this.multipleSelection[0].username
    }
}

3. 隐藏全选勾选框

// 隐藏全选框
::v-deep .has-gutter .el-table-column--selection .el-checkbox {
    display: none !important;
}