meteornk 2022-02-11 19:24 采纳率: 100%
浏览 297
已结题

vue3 + element plus 2.0.1,table组件的数据使用filter函数,同时根据选中数据的length更改按钮的状态,出错

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

vue + element plus 2.0.1 el-table组件,在data中使用filter,并根据是选中talbe中的数据行,更改“删除”按钮的状态。

问题相关代码,请勿粘贴截图
<template>
  <div>
    <div>
      <el-input clearable placeholder="搜索..." prefix-icon="el-icon-search" v-model="serarchText"></el-input>
    </div>
    <el-table border stripe
              :data="roleData.filter((data) => !serarchText || data.name.includes(serarchText))"
              :header-cell-style="{background:'#409EFF',color:'#FFF'}"
              @selection-change="handleRoleChange">
      <!--TODO::data 如果使用roleData.filter,会导致当前table无法选中数据-->
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column align="center" label="ID" prop="id" width="50" />
      <el-table-column align="center" label="角色名称" prop="name" width="150" />
      <el-table-column align="center" label="角色代码" prop="code" width="120" />
    </el-table>
    <div>
      <!--<el-button type="danger" :disabled="buttonDisabled">删除角色</el-button>-->
      <el-button type="danger" :disabled="roleSelectedData.length === 0">删除角色</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

// const buttonDisabled = ref(false);
const roleData = ref();
roleData.value = [
  {
    id: 1,
    code: 'ROLE_TEST0_1',
    name: '测试角色3',
    enabled: true
  },
  {
    id: 3,
    code: 'ROLE_TEST0_3',
    name: '系统开发员',
    enabled: true
  }
];

const roleSelectedData = ref();
roleSelectedData.value = [];

const serarchText = ref();

//
const handleRoleChange = (value: any) => {
  roleSelectedData.value = value;
  console.log('handleRoleChange >> roleIds = ', roleSelectedData.value);
};

watch(roleSelectedData, (newValue, oldValue) => {
  // if (newValue.length > 0) {
  //   buttonDisabled.value = true;
  // } else {
  //   buttonDisabled.value = false;
  // }
  // const _temp = JSON.parse(JSON.stringify(newValue));
  // if (_temp.length === 0) {
  //   buttonDisabled.value = true;
  // } else {
  //   buttonDisabled.value = false;
  // }
  console.log('Watch(roleSelectedData) newValue = ', newValue, '   oldValue = ', oldValue);
});

</script>
运行结果及报错内容

此时table的行无法选中,删除按钮的disable状态不变更。
通过watch打印roleSelectedData数据的状态,发现此时点击一下某数据行时,控制台会打印两次watch结果,也就是:

handleRoleChange >> roleIds =  Proxy {0: Proxy}
Watch(roleSelectedData) newValue =  Proxy {0: Proxy}    oldValue =  Proxy {}
handleRoleChange >> roleIds =  Proxy {}
Watch(roleSelectedData) newValue =  Proxy {}    oldValue =  Proxy {0: Proxy}

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

一头雾水,不知道为啥会这样,还请不吝赐教

我想要达到的结果

点击数据行时,如果此时有选中的行,则删除按钮解除disable状态;如果一行数据都没选中,此时删除按钮disable

  • 写回答

2条回答 默认 最新

  • 原莱_ 2022-02-12 11:04
    关注
    watch去掉,没有用,给tablerow-key,el-table-column加reserve-selection
    const getkey=(row)=>{
        return row.id
    }
    
    <el-table border stripe
                  :data="roleData.filter((data) => !serarchText || data.name.includes(serarchText))"
                  :header-cell-style="{background:'#409EFF',color:'#FFF'}"
                  @selection-change="handleRoleChange"
                  :row-key="getkey">
          <!--TODO::data 如果使用roleData.filter,会导致当前table无法选中数据-->
          <el-table-column align="center" type="selection" :reserve-selection="true" width="50" />
          <el-table-column align="center" label="ID" prop="id" width="50" />
          <el-table-column align="center" label="角色名称" prop="name" width="150" />
          <el-table-column align="center" label="角色代码" prop="code" width="120" />
        </el-table>
    

    img


    对你有用的话,请点击一下【采纳此答案】,谢谢🌹

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月21日
  • 已采纳回答 2月13日
  • 创建了问题 2月11日

悬赏问题

  • ¥15 R语言爬虫的时候元素和园代码不一样怎么解决呀
  • ¥15 VS2022多项目启动有问题
  • ¥15 SQL删除添加数据后序号不连续问题。
  • ¥15 首次运行OmniEvent运行报错
  • ¥15 有没有人知道这个问题怎么解决
  • ¥15 comsol电力电缆载流量仿真
  • ¥15 webSocket可以接TCP socket接口吗
  • ¥60 mpi并行出错,CFD++计算
  • ¥15 c#:vsto,powerpoint的外接程序中换主题颜色
  • ¥15 状态机/汽车转向灯/Sateflow