element-ui 里面的table 点击行进行切换选中状态

html 里面是:<el-table:data="tableData"borderheight="315"style="width: 100%"highlight-current-row@current-change="handleCurrentChange"//这个只会触发一次, 所以弃用@selection-change="handleSelectionChange"@row-click = "btn"//点击当前行就会触发ref="eltableCurrentRow"//必须有ref 这个实例,才能去掉用toggleRowSelection 这个方法>
</el-table>
data 里面去定义一个flag:false;method 的里面去写:btn(row,col,event){this.flag = !this.flag;  this.$refs.eltableCurrentRow.toggleRowSelection(row,this.flag);      }

实现效果:
点击第一次:

点击第二次

也不是本身的勾选框不好使用, 只是能点击就选中, 我觉得更有用户体验;还会再加东西的,~~~

//但是这样有一个弊病, 就是如果你换行去点击, 因为flag 是一个公共的标识符, 那么点击另一行时, flag 的变化,和第一次点击的状态其实是恰恰相反
所以这里的处理办法改一下

 btn(row,col,event){//把这个flag 变成当前的行的私有物,这样一来,每次变化的时候, 变化的都是你当前行的布尔值, row.flag = !row.flag;  this.$refs.eltableCurrentRow.toggleRowSelection(row,row.flag);      },

element-ui 里面的table 点击行进行切换选中状态相关推荐

element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
如何将html表格导出到excel,html 页面导出到excel表格数据类型-如何将html里面的table导出成excel...
怎么把html导出到excel表格 1先,我们打开要转换成THML的表格文件.下是我用的WPS2019版截图,EXCEL软件操作上差不多 2.接下来,点击左上角的[文件] 3.在[文件]菜单里找到并点 ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
IOS -- UICollectionView里面的cell点击,点击一个cell改变其他cell的状态
view.m - (void)initWithCreatorCollectView {//模拟数据 [self imitateData];float width = ([UIScreen mainSc ...
Bootstrap table 点击行改变背景色，点击列选中或者取消选中checkbox，根据某个属性隐藏显示某个字段
//点击选中行,改变选中行的背景颜色 (table).on('click-row.bs.table', function (e, row, element){ $('.success').remo ...
Antd Table 点击行变换背景颜色 (Antd React)
需求实现的目标是,点击这一行,然后出现一个modal,这个modal可以拖拽,并且可以知道是点击哪一行出现的事件. 那么需要做的就是,点击这一行,然后其背景颜色变化. 实现 Antd Table有 ...
vue element ui里的日期时间选择器中国标准时间转化为年月日时分秒
<el-date-pickerend-placeholder="结束日期"range-separator="至"start-placeholder=&qu ...
iview UI 的table组件设置复选框选中状态
<Table ref="selection" @on-selection-change="selectionChanged" border :column ...
Taro button点击切换选中状态
1.引入组件 2.state中设置选中状态 // button按钮的默认选中,0代表选中 state = { currentIndex: 0 } 3.设置class的样式,点击更改选中 selectN ...

element-ui 里面的table 点击行进行切换选中状态

element-ui 里面的table 点击行进行切换选中状态相关推荐

最新文章

热门文章