一.ElementUI 将table多选框改为单选框 <el-table :data="tableData" @selection-change="handleSelectionChange" @select="radioHandle" height="250" highlight-current-row style="width: 100%" ref="tb" > // 多选变单选 handleSelectionChange(val) { if (val.length > 1) { this.$refs.tb.clearSe...
{let item=val[val.length-1];this.checkedSelection=JSON.parse(JSON.stringify(item));}// 单选选中多条时,需要清空所选数据if(val.length>1){this.$refs.multipleTable.clearSelection();// 清空选项this.$refs.multipleTable.toggleRowSelection(val.pop());// 选中最后点击的数据}// 取消选中if(val.len...
//改为异步执行async singleSelect (selection, row) {console.log('触发清空事件'); awaitthis.$refs.authTable.clearSelection() console.log('清空事件完成');if(selection.length === 0)returnconsole.log('触发选中事件');this.$refs.authTable.toggleRowSelection(row,true) console.log('选中事件完成');...
<el-table-column prop="name" label="名称"/> <el-table-column prop="createTime" label="创建时间" width="160px"/> </el-table> 1. 2. 3. 4. 5. 6. 7. 8. 多选变单选,关键是ref=“xx” handleSelectionChange (val) { if (val.length > 1) { ...
需求是使用el-table的多选功能,然后不想要多选改成单选。 代码 <template><divclass="contentBox"v-loading="loading"><el-table:data="list"ref="accountRef"@select="handleTableChange"><el-table-columntype="selection"width="45"></el-table-column><el-table-columnwidth="100"prop="name"></el-tab...
el-table 多选添加限制只能选一个 遇到了新需求,el-table中的多选行限制显示成单选行,并且单击当前行的其他地方也要默认勾选当前行数据,使用radio又嫌弃太丑了,需要方框,那就只能在之前的多选框上面改造了 思路:勾选超过1条勾选第二条的时候做处理,将新勾选的设置选中,之前勾选的一条取消选中...
el-table 单选 简单来说,就是把el-table的多选改成单选 效果图.png <el-table v-loading="loading":data="list"class="typeTable"@select="handleSelectionChange"><el-table-columntype="selection"width="55"align="center"/><el-table-columnlabel="XXXX"align="center"prop="XXX"/></el-table>...
给vue的el-table单选加点料 做项目的时候,某处多选需要修改为单选,看到这个问题觉得很简单啊,果然,打开vue组件库,轮子已经搭好了,复制粘贴一气呵成。 但是测试有话说了,该处和需求不符合啊,你看需求单选后会出现对勾作为选中标志(vue组件只提供了高亮),你是不是得改一改。
在使用el-table实现选择操作的时候,官方提供了一种多选功能,将type设置为selection。而有时候因项目需求,需要进行单选操作,接下来通过一个简单的例子,实现el-table表格单选操作。显然要实现单选,需要用el-radio标签来实现,代码如下: <el-table ref="multipleTable" ...