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

最新推荐文章于 2024-12-15 17:32:12 发布

转载最新推荐文章于 2024-12-15 17:32:12 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/14089205/2380833

本文详细介绍了Element UI中表格组件的使用方法，包括如何通过关键代码实现复选框样式的改变以及行点击事件的处理。通过具体示例，展示了如何在Vue项目中利用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>

效果图如下所示