博客

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)是什么呢？

还是看官网

这下就彻底懂了吧！