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);
    },
相关推荐
烛阴10 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_125441 分钟前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx43 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n1 小时前
前台调用接口的方式及速率对比
前端
周之鸥1 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉1 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷2 小时前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试2 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题