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

lgx211

已于 2024-10-20 16:26:19 修改

阅读量1.3k

点赞数 4

分类专栏： vue 文章标签： element 表格 table 点击行选中复选框

于 2019-04-18 15:37:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43750212/article/details/89380201

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何在Element UI的表格组件中，通过点击行来实现复选框的选中效果。关键代码和实际展示效果被详细呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码如下

<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>