element-ui中@selection-change执行两次

原莱_ 2022-09-28 我要评论

element-ui中@selection-change执行两次

问题描述

行内处理数据也就是：

data="roleData.filter((data) => !serarchText || data.name.includes(serarchText))"和type="selection"

共存的时候执行出错，@selection-change执行了两次

我最近再试这段代码发现并没有执行两次，element-plus好像修复了这个？？

<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">
      <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>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
const roleData = ref();
roleData.value = [
  {
    id: 1,
    code: "ROLE_TEST0_1",
    name: "测试角色3",
    enabled: true,
  },
  {
    id: 3,
    code: "ROLE_TEST0_3",
    name: "系统开发员",
    enabled: true,
  },
];
let roleSelectedData = ref([]);
let serarchText = ref();
const handleRoleChange = (value: any) => {
  roleSelectedData.value = value;
  console.log(value);//选择selection框 两次执行
};
</script>

我暂且认为应该是行内处理数据的时候 (就是行内处理data)，每一次修改table相关数据或者变量，会重新加载数据(触发行内数据处理)从而触发table的更新，导致两次执行，一次有你操作的数据，一次是重置table。

所以有两种方法解决，第一种是不触发table的更新，还有一种是更新后，获取第一次触发的结果。

如果不是因为行内处理数据引起，则直接看第二种方法

第一种方法就是，改变你data的数据处理方式，不在行内进行数据处理。

<el-input clearable placeholder="搜索..." prefix-icon="el-icon-search" v-model="serarchText"></el-input>
<el-table border stripe
     :data="transData"
     :header-cell-style="{background:'#409EFF',color:'#FFF'}"
     @selection-change="handleRoleChange"
>
</el-table>

<script lang="ts" setup>
const roleData = ref();
roleData.value = [
  {
    id: 1,
    code: "ROLE_TEST0_1",
    name: "测试角色3",
    enabled: true,
  },
  {
    id: 3,
    code: "ROLE_TEST0_3",
    name: "系统开发员",
    enabled: true,
  },
];
let serarchText = ref();
const transData = ref([...roleData.value])
watch(serarchText,(newValue)=>{
  if(newValue){
    let tempdata = roleData.value
    transData.value = tempdata.filter((data) => !newValue || data.name.includes(newValue))
  }else{
    transData.value =roleData.value
  }
})
</script>

第二种就是继续使用行内数据处理，table添element-ui内自带的属性加row-key以及type="selection"添加reserve-selection，在数据更新之后保留第一次触发的数据。

reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。

<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="(row)=>{row.id}">
  <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>

最近试这个:reserve-selection=“true”，会导致在搜索值变化的时候，造成所选值的更改反转之类的

element-ui的@selection-change学习总结

<template>
  <el-table
    ref="multipleTable"
    :data="tableData3"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
 
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

handleSelectionChange(val) { this.multipleSelection = val; }

//val 为选中数据的集合

通过this.multipleSelection.prop字段取得每一个选项的值，prop字段就是表格里面子项的prop值。

this.multipleSelection.length为选择了多少项。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

element-ui中@selection-change执行两次