關(guān)于element-ui中@selection-change執(zhí)行兩次的問(wèn)題
更新時(shí)間：2022年08月12日 10:51:12 作者：原萊_
這篇文章主要介紹了關(guān)于element-ui中@selection-change執(zhí)行兩次的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element-ui中@selection-change執(zhí)行兩次
問(wèn)題描述
行內(nèi)處理數(shù)據(jù)也就是：
data="roleData.filter((data) => !serarchText || data.name.includes(serarchText))"和type="selection"
共存的時(shí)候執(zhí)行出錯(cuò)，@selection-change執(zhí)行了兩次
我最近再試這段代碼發(fā)現(xiàn)并沒(méi)有執(zhí)行兩次，element-plus好像修復(fù)了這個(gè)？？
<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="角色名稱(chēng)" 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: "測(cè)試角色3",
? ? enabled: true,
? },
? {
? ? id: 3,
? ? code: "ROLE_TEST0_3",
? ? name: "系統(tǒng)開(kāi)發(fā)員",
? ? enabled: true,
? },
];
let roleSelectedData = ref([]);
let serarchText = ref();
const handleRoleChange = (value: any) => {
? roleSelectedData.value = value;
? console.log(value);//選擇selection框 兩次執(zhí)行
};
</script>我暫且認(rèn)為應(yīng)該是行內(nèi)處理數(shù)據(jù)的時(shí)候 (就是行內(nèi)處理data)，每一次修改table相關(guān)數(shù)據(jù)或者變量，會(huì)重新加載數(shù)據(jù)(觸發(fā)行內(nèi)數(shù)據(jù)處理)從而觸發(fā)table的更新，導(dǎo)致兩次執(zhí)行，一次有你操作的數(shù)據(jù)，一次是重置table。
所以有兩種方法解決，第一種是不觸發(fā)table的更新，還有一種是更新后，獲取第一次觸發(fā)的結(jié)果。
- 如果不是因?yàn)樾袃?nèi)處理數(shù)據(jù)引起，則直接看第二種方法
第一種方法就是，改變你data的數(shù)據(jù)處理方式，不在行內(nèi)進(jìn)行數(shù)據(jù)處理。
<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: "測(cè)試角色3",
? ? enabled: true,
? },
? {
? ? id: 3,
? ? code: "ROLE_TEST0_3",
? ? name: "系統(tǒng)開(kāi)發(fā)員",
? ? 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>第二種就是繼續(xù)使用行內(nèi)數(shù)據(jù)處理，table添element-ui內(nèi)自帶的屬性 加row-key以及type="selection"添加reserve-selection，在數(shù)據(jù)更新之后保留第一次觸發(fā)的數(shù)據(jù)。
reserve-selection：僅對(duì) type=selection 的列有效，類(lèi)型為 Boolean，為 true 則會(huì)在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)（需指定 row-key）row-key：行數(shù)據(jù)的 Key，用來(lái)優(yōu)化 Table 的渲染；在使用 reserve-selection 功能與顯示樹(shù)形數(shù)據(jù)時(shí)，該屬性是必填的。
<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="角色名稱(chēng)" prop="name" width="150" />
? <el-table-column align="center" label="角色代碼" prop="code" width="120" />
</el-table>最近試這個(gè):reserve-selection=“true”，會(huì)導(dǎo)致在搜索值變化的時(shí)候，造成所選值的更改反轉(zhuǎn)之類(lèi)的
element-ui的@selection-change學(xué)習(xí)總結(jié)
<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]])">切換第二、第三行的選中狀態(tài)</el-button>
<el-button @click="toggleSelection()">取消選擇</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 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 為選中數(shù)據(jù)的集合
通過(guò)this.multipleSelection.prop字段 取得每一個(gè)選項(xiàng)的值，prop字段就是表格里面子項(xiàng)的prop值。
this.multipleSelection.length為選擇了多少項(xiàng)。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目input標(biāo)簽checkbox,change和click綁定事件的區(qū)別說(shuō)明
這篇文章主要介紹了vue項(xiàng)目input標(biāo)簽checkbox,change和click綁定事件的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法
這篇文章主要介紹了Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問(wèn)題
這篇文章主要介紹了關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue全局過(guò)濾器概念及注意事項(xiàng)和基本使用方法
這篇文章主要給大家分享了vue全局過(guò)濾器概念及注意事項(xiàng)和基本使用方法，下面文字圍繞vue全局過(guò)濾器的相關(guān)資料展開(kāi)具體的詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-11-11
這篇文章主要介紹了Vue路由切換時(shí)的左滑和右滑效果,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
本文主要介紹了vue中table實(shí)現(xiàn)真正的跨越全選，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue+Element ui 根據(jù)后臺(tái)返回?cái)?shù)據(jù)設(shè)置動(dòng)態(tài)表頭操作
這篇文章主要介紹了Vue+Element ui 根據(jù)后臺(tái)返回?cái)?shù)據(jù)設(shè)置動(dòng)態(tài)表頭操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue 支持百萬(wàn)量級(jí)的無(wú)限滾動(dòng)組件詳解
這篇文章主要為大家介紹了vue 支持百萬(wàn)量級(jí)的無(wú)限滾動(dòng)組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本篇文章主要介紹了在Vue中使用echarts的實(shí)例代碼（3種圖），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
使用vue編寫(xiě)一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲
這篇文章主要為大家詳細(xì)介紹了使用vue編寫(xiě)一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08