Element-表格之点击行选中复选框
又是敲代码的一天,想在element-ui的表格中想点击某行选中再点击取消,这是比较常用的功能,客户对于表格的操作就很便利,接下来是实现方法,不想听废话的可以直接看后面代码
首先你有一个el-table表格,它可以是这样的
<el-table :data="List">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="单位" align="center" prop="dept"/>
<el-table-column label="年份" align="center" prop="yearYear"/>
</el-table>
总之就随便一个表格嘛,当然你要有数据,不然怎么测试呢
接下来你需要在el-table里面定义两个属性,
ref="table"
和
@row-click="handleRowClick"
,ref属性就跟id差不多,只不过它是在vue中使用,可以根据它操作dom元素,@row-click是行点击事件,element官网有的,可以多看看
添加之后:
<el-table :data="List" ref="table" @row-click="handleRowClick">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="单位" align="center" prop="dept"/>
<el-table-column label="年份" align="center" prop="yearYear"/>
</el-table>
接下来就是定义
handleRowClick
方法了,在
methods
中定义
//点击行选中或取消复选框
handleRowClick(row, column, event){
//通过ref绑定后这里使用$refs.table来操作bom元素
this.$refs.table.toggleRowSelection(row);
}
你可能有疑问?toggleRowSelection(row)是什么呢?
还是看官网
这下就彻底懂了吧!
版权声明:本文为qq_45974474原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。