element表格点击行即选中该行复选框

时间:2022-03-05 14:48:20

关键代码如下

<el-table ref="multipleTable" :data="tableData" highlight-current-row tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" @row-click="handleRowClick">
</el-table>

<script>
  export default {
    methods: {
      //点击复选框触发,复选框样式的改变
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //点击行触发,选中或不选中复选框
      handleRowClick(row, column, event){
          this.$refs.multipleTable.toggleRowSelection(row);
      }
    }
  }      
</script>

效果图如下所示
element表格点击行即选中该行复选框