要将Element UI的el-table组件中的selection设置为只能单选模式,你可以通过以下几种方式实现: 1. 使用selection-change事件控制选择行为 你可以通过在el-table组件上监听selection-change事件,当用户选择多行时,通过编程方式清除其他行的选择,只保留最新选择的行。 vue <template> <div> <el-table...
一、el-table加上@selection-change="selectedChange",并加上<el-table-column type="selection" width="60" align="center"></el-table-column>选择行 <el-table ref="table"class="elTable":data="data"border @selection-change="selectionChange"><el-table-columntype="selection"width="40"align="cent...
<el-table :data="tableData" ref="table" border :header-cell-class-name="cellClass" > <el-table-column type="selection" align="center" /> </el-table> methods中增加对应函数,可根据是否单选(this.radio)来控制全选框显示与否this.radio 根据不同的业务场景可以动态控制methods: { cellClass(row){...
@selection-change勾选框选中事件 <el-table@current-change="handleSelectionChange"highlight-current-row @selection-change="handleSelectionChange"ref="multipleTable"border :data="workorderList"> handleSelectionChange(selection) {if(Array.isArray(selection) && selection.length > 1) {//点击勾选框this.$...
@select="selectChange" const selectChange = (selection) => { if (selection.length > 1) { // 1. 拿到选中数组中前一项的行数据 const preRow = selection[0]; // 2. 再把选中数组中的第一项(前一项)删除 selection.splice(0, 1); // 3. 再根据前一项的数据去表格中取消选中对应的那一行 sing...
需求是使用el-table的多选功能,然后不想要多选改成单选。 代码 <template> <div class="contentBox" v-loading="loading"> <el-table :data="list" ref="accountRef" @select="handleTableChange"> <el-table-column type="selection" width="45"></el-table-column> <el-table-column width="100" ...
}//@selection-change 事件方法selGroup (val) { console.log('选中的数据---', val); } 打印如下: 分析一下, 多选框再次点击的时候是会触发一次 @selection-change 事件的( 此时数据为2条 ), 但是不知道是事件优先级还是阻塞的问题, 这一次事件被放在 @select 后面去执行了, 也就是先执行完了 @select...
type="selection" width="55" align="center" /> <el-table-column label="XXXX" align="center" prop="XXX" /> </el-table> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. // 选中数据 //原理就是取消所有选择,再选中点击的,达到单选效果 ...
const val = selection; this.contarctSelect = val.map(item => item.id); //单选,contractList是表格数据,contractTable是el-table的ref this.contractList.forEach(item => { if (val[val.length - 1] === item) { this.$refs.contractTable.toggleRowSelection(item, true) ...