VUE el-table单选行

最新推荐文章于 2025-04-21 07:39:14 发布

转载最新推荐文章于 2025-04-21 07:39:14 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://jingyan.baidu.com/article/1e5468f9dcd3d2084861b77e.html

Vue.js 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了在Vue框架中使用Element UI组件库的表格元素进行多选配置及事件控制的方法。包括如何通过ref属性操作表格实例，利用@row-click和@selection-change事件处理行点击和选择变化，以及如何在数据变化时更新表格选中状态。

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

一、表格配置

<el-table ref="multipleTable" @row-click="handleRowClick"  @selection-change="handleSelectionChange"

（1）ref="multipleTable"

（2）@row-click="handleRowClick"

（3） @selection-change="handleSelectionChange"

二、事件控制


  data() {
    return {
      //存储表格选中的行数据
      multipleSelection:[],



  methods: {

    // 多选框选中数据
    handleSelectionChange(selection) {
      if(selection.length>1){
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(selection.pop());
      }else{
        this.multipleSelection=selection.pop();
      }
      //this.ids = selection.map(item => item.driverId)
      //this.single = selection.length!=1
      //this.multiple = !selection.length
    },
    /**表格单选行资料处理*/
    handleRowClick(row,column,event){
      this.$refs.multipleTable.toggleRowSelection(row);
    },

三、获取行选中资料处理业务


    /**选择司机*/
    select(){
      this.$emit("changeRelatedDriver",this.multipleSelection.driverId);
    },