方案一:直接在el-table中使用
如图所示:复选框只能选中一个
代码:
<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>
methods中:
toggleRowSelection:用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
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
}
}
方案二:把el-table封装成了组件
myTable.vue封装的组件
<el-table ref="tableRef">
<el-table-column @select-all="selectAll" @select="select"></el-table-column>
</el-table>
methods:{
select(selection) {
if (selection.length > 1) {
let del_row = selection.shift()
this.$refs.tableRef.toggleRowSelection(del_row, false)
}
},
selectAll(selection) {
if (selection.length > 1) {
selection.length = 1
}
},
}
2.在子组件中使用myTable组件
import MyTable from './myTable.vue'
<my-table ref="selfTableRef" @select-all="selectAll" @select="select">
</my-table>
methods: {
select(selection) {
this.$refs.selfTableRef.select(selection)
},
selectAll(selection){
this.$refs.selfTableRef.selectAll(selection)
},
}