Advertisement

Vue elementUI 多选表格实现单选操作

阅读量：
复制代码 
    <el-table :data="tableData" select="selectChoose" v-loading="loading" style="width: 100%" ref="multipleTable">
    <el-table-column type="selection"></el-table-column>
    </el-table>
复制代码 
    //clearSelection：用于多选表格，清空用户的选择
    //toggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    selectchoose(selection,row){//当checkbox改变时触发
    console.log( "row",row)
    //当点击时selection会存放当前行数据
    this.$refs.multipleTable.clearSelection();//先清空选中状态，selection值还在
    if (selection.length === 0){//这里状态为勾选
        return;
    }
    this.$refs.multipleTable.toggleRowSelection(row,true);//用于切换某行选中状态
    }

全部评论 (0)

还没有任何评论哟~

相关文章推荐

Vue elementUI 多选表格实现单选操作

<eltable:data=tableDataselect=selectChoosevloading=loadingstyle=width:100%ref=multipleTable <eltable...

【Vue + ElementUI】 实现树形结构的单选操作

实现后的效果图： 没有做gif图片，下次有时间做一下，替换过来吧，效果就是只能单选，而且只能选择最底端的叶子节点。 代码部分： 1）showcheckbox即可以打开树结构前面的框框，elementU...

vue+elementUI实现级联表格el-table级联多选

vue+elementUI实现级联表格eltable级联多选 <template <divid=app <elbuttontype=primary@click=getAllSelect获取选中集合</...

elementUI 表格多选连续选中

elementUI表格多选连续选中 需求只能选择连续的行，不可以跳选 效果图 <template <eldialogtitle=手动上报:visible.sync=dialogHand@close=h...

Vue中Element的table多选表格如何实现单选

效果图 html代码 <eltable ref=multipleTable :data=tableData highlightcurrentrow :rowkey=getRowKey @selecti...

elementUI树状多选表格

树状多选表格需回显已选择的可控制展开收起 <elbuttonvif=!fold@click=foldShow <icolor=pinkclass=eliconcircleplus</i全部展开 </e...

vue + element ui table表格多选改单选

<eltable ref=multipleTable :data=LogisticstableData :headercellstyle=background:'eef1f6',color:'9093...

Vue+ElementUI实现Table表格添加自定义头CheckBox多选框

<template <divid=app <imgsrc=./assets/logo.png <eltable:data=tableDatastyle=width:100% <eltablecolum...

vue 使用ElementUI 在表格外设置全选的多选框

一、效果图 未选择状态： 未全选状态： 全选状态： 二、代码实现 data： data return //数据 tableData:[], /全选的问题/ multipleSelection:[], ...

HTML表格区域选中列选中-Vue & ElementUI

HTML元素（主要是文本）能否被选中，是由userselectcss属性控制的，若设置为none则不可选中，更多属性值参考MDN. HTML页面的默认选中方式是行选择模式，即鼠标从按下到释放中间经过的...