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);
    },
相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js