el-table 单击某一行,该行的前面的多选框显示已勾选

目 录

官网:

[1. 单页面](#1. 单页面)

[2. table是组件](#2. table是组件)


案例:

官网:

1. 单页面

通过单击获取当前行的数据,然后传给选中显示勾选的方法。

javascript 复制代码
<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @row-click="Getrowclick"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
  </el-table>
  
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },],
        multipleSelection: []
      }
    },

    methods: {
     /**
     * 单击事件方法
     */
    Getrowclick(val) {
      console.log("单击了啊", val);
      this.$refs.multipleTable.toggleSelection(val);
    },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

2. table是组件

2.1 在table组件中添加方法

javascript 复制代码
 /**
     * 单击某一行,该行多选框显示已选中
     */
    toggleSelection(rows) {
      if (rows) {
        // rows.forEach((row) => {
        //   this.$refs.table.toggleRowSelection(row);
        // });
        this.$refs.table.toggleRowSelection(rows);
      } else {
        this.$refs.table.clearSelection();
      }
    },

2.2 在主页面调用

javascript 复制代码
 /**
     * 单击事件
     */
    GetrowClick(val) {
      console.log("单击了啊", val);
      this.$refs.cummonTable.toggleSelection(val);
    },
相关推荐
天天扭码8 分钟前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw510 分钟前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !12 分钟前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt14 分钟前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜1 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js