element-ui表格table中复选框只能选中一个
方法一:
<el-table stripe v-loading="loading" :data="tableData.list" class="table-box-tab table_type_five" style="padding-left:15px;padding-right:15px;" :style="{'padding-right': this.paddingRight == false? '14px':'15px'}" @selection-change="handleSelectionChange" ref="multipleTable" @select="select"> <el-table-column type="selection" width="40"></el-table-column> </el-table>
handleSelectionChange(e) {
let bfTmpUserSelectArr = this.userSelectArr;// 上一次用户选择的数据
this.userSelectArr = e;
if (this.userSelectArr.length > 1) {
if (bfTmpUserSelectArr.length == 1) {
let del_row = this.userSelectArr.shift()
this.$refs.multipleTable.toggleRowSelection(del_row, false)
} else {
this.$message({
message: '一次只能操作一条',
type: 'warning'
});
this.handleSelectionClear();
}
return
}
if (this.userSelectArr.length == 1 && this.userSelectArr[0].backStatus == 1) {
this.$message({
type: 'info',
message: '无需'
});
this.handleSelectionClear();
return
}
}
方法二:
<el-table
ref="multipleTable"
:data="updatetableData"
style="width: 100%"
@selection-change="updatehandleSelectionChange"
@select="select"
@select-all="selectAll"
>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="精品名称"></el-table-column>
<el-table-column prop="tag" label="排序">
<template slot-scope="scope">
<el-input v-model="scope.row.sort" />
</template>
</el-table-column>
</el-table>
select(selection, row) {
if (selection.length > 1) {
let del_row = selection.shift()
this.$refs.multipleTable.toggleRowSelection(del_row, false)
}
},
selectAll(selection){
if (selection.length > 1) {
selection.length = 1
}
}