el-table多选改造同时选中同一个id的数据（学习笔记）

最新推荐文章于 2024-07-25 17:23:54 发布

最胖的小仙女

最新推荐文章于 2024-07-25 17:23:54 发布

阅读量810

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_39418338/article/details/127304312

版权

这篇博客介绍了如何在Vue.js项目中使用ElementUI的el-table组件，改造多选功能，确保当选择具有相同ID的数据时，所有相关行将同时被选中。通过深入理解listData.js文件的处理逻辑，博主分享了关键代码片段和实现步骤。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @row-click="rowClick"
      border
      :reserve-selection="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column width="55">
        <!-- slot-scope="scope" 这属性必须要 不然全选按钮有问题 -->
        <template slot="header" slot-scope="scope">
          <!-- 这一行没有意义，为了格式校验通过 -->
          <template v-if="false">{
  { scope }}</template>
          <el-checkbox v-model="isAll" @change="allChange"></el-checkbox>
        </template>
        <template slot-scope="scope">
          <span @click="stopEvent">
            <el-checkbox
              :key="scope.row.id"
              v-model="scope.row.flag"
              @change="choose(scope.row)"
            />
          </span>
        </template>
      </el-table-column>
      <el-table-column label=&#