落落A 2022-10-20 17:49 采纳率: 63.6%
浏览 230
已结题

element-plus 多选框的问题

问题遇到的现象和发生背景

element-plus + vite

img

我的解答思路和尝试过的方法

我采用selection-change的方法可以一起选中,但是取消不了

我想要达到的结果

表格内容数据有相同的id
要求是选中其中一个id,其他的相同的id数据也全部选中,取消则一起取消
有更好的方法推荐一下

  • 写回答

2条回答 默认 最新

  • MAXLZ 2022-10-20 18:26
    关注

    参考这个:example-多选

    <template>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @select="handleSelect"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
      </el-table>
    </template>
    
    <script lang="ts" setup>
    import { ref, toRaw } from 'vue'
    import { ElTable } from 'element-plus'
    
    interface User {
      date: string
      name: string
      address: string
    }
      
    const tableData: User[] = [
      {
        date: '2016-05-03',
        name: 'Tom1',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom1',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom2',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom2',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]
    
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    
    const handleSelect = (val: User[], row: User) => {
      const data = tableData.forEach(item => {
        if (item.name === row.name && item !== toRaw(row)) {
          multipleTableRef.value.toggleRowSelection(item)
        }
      })
    }
    
    
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月21日
  • 已采纳回答 10月21日
  • 创建了问题 10月20日

悬赏问题

  • ¥15 在获取boss直聘的聊天的时候只能获取到前40条聊天数据
  • ¥20 关于URL获取的参数,无法执行二选一查询
  • ¥15 液位控制,当液位超过高限时常开触点59闭合,直到液位低于低限时,断开
  • ¥15 marlin编译错误,如何解决?
  • ¥15 有偿四位数,节约算法和扫描算法
  • ¥15 VUE项目怎么运行,系统打不开
  • ¥50 pointpillars等目标检测算法怎么融合注意力机制
  • ¥20 Vs code Mac系统 PHP Debug调试环境配置
  • ¥60 大一项目课,微信小程序
  • ¥15 求视频摘要youtube和ovp数据集