快捷導(dǎo)航

使用element Table表格獲取勾選的數(shù)據(jù)

更新時(shí)間：2025年12月03日 09:38:21 作者：霸氣小男

通過實(shí)例介紹了如何使用elementTable表格組件獲取勾選的數(shù)據(jù),總結(jié)個(gè)人經(jīng)驗(yàn),旨在為讀者提供參考和學(xué)習(xí)資源

element Table表格獲取勾選的數(shù)據(jù)

看實(shí)例吧

<template>
    <div>
        <el-table ref="elTable" :data="tableData" border default-expand-all @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            targetSelectArr:[]  
        }
    },
    methods:{
        handleSelectionChange (selectionArr) {
            let _targetArr = []
            // 遍歷已選擇數(shù)據(jù)id
            selectionArr.map((item) => {
                _targetArr.push(item.id)
            })
            this.targetSelectArr = _targetArr
        }
    }
}
</script>

?

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2路由中router-view不顯示的原因及踩坑記錄
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vueCli?4.x升級5.x報(bào)錯(cuò):Progress?Plugin?Invalid?Options的解決方法
本文主要介紹了vueCli?4.x升級5.x報(bào)錯(cuò):Progress?Plugin?Invalid?Options的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-01-01
Vue CLI 中常用的加載器及其配置小結(jié)
本文主要介紹了Vue CLI 中常用的加載器及其配置,及如何根據(jù)項(xiàng)目需求進(jìn)行自定義擴(kuò)展,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-06-06
應(yīng)用provide與inject刷新Vue頁面方法
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進(jìn)步，祝大家早日升職加薪
2021-09-09
elementUI組件中el-date-picker限制時(shí)間范圍精確到小時(shí)的方法
現(xiàn)在需要做一個(gè)時(shí)間選擇器,可以根據(jù)小時(shí)(同時(shí)選天和小時(shí))和天?和月,節(jié)假日等類型控制日歷的選擇樣式,下面這篇文章主要給大家介紹了關(guān)于elementUI組件中el-date-picker限制時(shí)間范圍精確到小時(shí)的相關(guān)資料,需要的朋友可以參考下
2023-04-04
vuejs簡單驗(yàn)證碼功能完整示例
這篇文章主要介紹了vuejs簡單驗(yàn)證碼功能,結(jié)合完整實(shí)例形式分析了vue.js驗(yàn)證碼的生成、顯示、校驗(yàn)等相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式
這篇文章主要介紹了Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01
Vue defineProperty使用教程
Vue通過Object.defineProperty來實(shí)現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法）實(shí)現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理
2023-01-01
詳解Vue如何使用xlsx庫導(dǎo)出Excel文件
第三方庫xlsx提供了強(qiáng)大的功能來處理Excel文件,它可以簡化導(dǎo)出Excel文件這個(gè)過程,本文將為大家詳細(xì)介紹一下它的具體使用,需要的小伙伴可以了解下
2025-01-01
Vue如何根據(jù)id在數(shù)組中取出數(shù)據(jù)
這篇文章主要介紹了Vue如何根據(jù)id在數(shù)組中取出數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08