Element ui表单实现点击行数据单选，复选框打勾

Element ui表单实现点击行数据单选，复选框打勾

实现：点击行数据时，数据选中，行数据前面的复选框也被勾选

<el-table

    ref="multipleTable" //给表格添加ref，后面可以拿到表格实例

    :data="formDta"

    size="small"

    highlight-current-row

    @row-click="handleCurrentChange" //当行数据被点击时触发

    @selection-change="select" //复选框  选择改变时触发

    @select-all="selectAll" //复选框  选择时触发 

   \>
      //选择改变时触发
  select(selection) {  
        //selection是数组，每个数组元素代表选中的那一行的数据
   if (selection.length > 1) {

    let del_row = selection.shift();  //这个方法是删除selection数组的第一个元素，并返回第一个元素的值。

   this.$refs.multipleTable.toggleRowSelection(del_row, false); 
   /* 用于多选表格，切换某一行的选中状态，
   如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
   这里将selection数组的上一个元素的值传入。并传入false，
   设置为不被选中。 multipleTable是给表格添加的ref */

   }
  },

  // 点击全部复选框时触发
  selectAll(selection) {

   this.$refs.multipleTable.clearSelection()  //清除勾选

  },

  //单选

  handleCurrentChange(row) { //row就是行信息

   this.id = row.id;

   this.$refs.multipleTable.toggleRowSelection(row) // 传入行信息，使得该行复选框打上勾

  }

实现效果