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);
    },
相关推荐
我有一棵树3 分钟前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊5 分钟前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
fruge8 分钟前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript
用户8772447539610 分钟前
Lubanno7UniverSheet:开放底层能力,让你的表格需求 “不设限”
前端
张可爱15 分钟前
ES6奶茶铺版通俗笔记 🍵✨
前端
用户8772447539616 分钟前
Lubanno7UniverSheet:选择命令式,为了真正的跨框架通用
前端
paopaokaka_luck16 分钟前
基于SpringBoot+Vue的数码交流管理系统(AI问答、协同过滤算法、websocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·websocket·echarts
Aoda22 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
幸运小圣23 分钟前
Set数据结构【ES6】
javascript·数据结构·es6
望获linux25 分钟前
【实时Linux实战系列】使用 u-trace 或 a-trace 进行用户态应用剖析
java·linux·前端·网络·数据库·elasticsearch·操作系统