關於element-ui中@selection-change執行兩次的問題

Posted on by

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為選擇瞭多少項。 

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：