element table组件多选改单选

效果图

1. table组件属性设置

<el-table
    :data="user_List"
    ref="multipleTable"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <template v-for="(col, index) in userTableColumns">
        <el-table-column
            :key="index"
            :prop="col.prop"
            :label="col.label"
            :width="col.width"
            :formatter="col.formatter"
            v-bind="col"
            show-overflow-tooltip>
        </el-table-column>
    </template>
</el-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;
}