elementui實(shí)現(xiàn)表格(el-table)默認(rèn)選中功能

更新時(shí)間：2024年07月23日 11:22:34 作者：徐_三歲

這篇文章主要介紹了elementui實(shí)現(xiàn)表格(el-table)默認(rèn)選中功能,本文給大家分享實(shí)現(xiàn)思路結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

實(shí)現(xiàn)效果：

默認(rèn)選中表格的某一行或多行

實(shí)現(xiàn)思路

創(chuàng)建一個(gè)空數(shù)組用來(lái)存放默認(rèn)數(shù)據(jù)
遍歷表格的數(shù)據(jù)，再遍歷需要在表格中反顯的數(shù)據(jù)，兩者的id一致（兩者之間共同的標(biāo)識(shí)即可，一般以id做判斷）
把判斷出來(lái)的默認(rèn)表格數(shù)據(jù)push到創(chuàng)建的數(shù)組中
再遍歷數(shù)組，將數(shù)據(jù)放入方法中

實(shí)現(xiàn)代碼

HTML部分

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    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>
</template>

JS部分

//創(chuàng)建一個(gè)空數(shù)組用來(lái)存放默認(rèn)數(shù)據(jù)
let list = []
//遍歷表格的數(shù)據(jù)，再遍歷需要在表格中反顯的數(shù)據(jù)，兩者的id一致
this.tableData.forEach((item) => {
     this.tableList.forEach(val => {
         if (val.id=== item.id) {
         	// 把判斷出來(lái)的默認(rèn)表格數(shù)據(jù)push到創(chuàng)建的數(shù)組中
             list.push(item)
         }
    })
 })
 if (list) {
 	//再遍歷數(shù)組，將數(shù)據(jù)放入方法中
     list.forEach((row) => {
       this.$refs.multipleTable.toggleRowSelection(row, true)
     })
 }

到此這篇關(guān)于elementui實(shí)現(xiàn)表格(el-table)默認(rèn)選中的文章就介紹到這了,更多相關(guān)elementui el-table默認(rèn)選中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

關(guān)于webpack-dev-server配置代理解決前端開(kāi)發(fā)中的跨域問(wèn)題
這篇文章主要介紹了關(guān)于webpack-dev-server配置代理解決前端開(kāi)發(fā)中的跨域問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue實(shí)現(xiàn)樹(shù)狀表格效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹(shù)狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
Vue-router跳轉(zhuǎn)和location.href的區(qū)別及說(shuō)明
Vue?Router是Vue.js官方的路由管理器,它允許我們通過(guò)定義路由來(lái)管理應(yīng)用程序的不同視圖和狀態(tài),Vue路由跳轉(zhuǎn)主要有以下幾種方式：<router-link>標(biāo)簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法
2025-01-01
vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue3?defineExpose的使用及應(yīng)用場(chǎng)景分析
Vue3中defineExpose用于向父組件暴露子組件的屬性和方法,尤其在script setup語(yǔ)法中,需顯式聲明以實(shí)現(xiàn)組件間交互,可控制暴露內(nèi)容,避免過(guò)度暴露,同時(shí)注意響應(yīng)式數(shù)據(jù)解包與測(cè)試影響,本文給大家介紹vue3?defineExpose的使用,感興趣的朋友一起看看吧
2025-06-06
詳解Vue+Element的動(dòng)態(tài)表單，動(dòng)態(tài)表格（后端發(fā)送配置，前端動(dòng)態(tài)生成）
這篇文章主要介紹了Vue+Element動(dòng)態(tài)表單動(dòng)態(tài)表格，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
淺談super-vuex使用體驗(yàn)
super-vuex是一套用于簡(jiǎn)化Vuex的數(shù)據(jù)架構(gòu)。這篇文章主要介紹了淺談super-vuex使用體驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
vue組件與復(fù)用詳解
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue組件與復(fù)用,需要的朋友可以參考下
2018-04-04
vue中的面包屑導(dǎo)航組件實(shí)例代碼
這篇文章主要介紹了vue的面包屑導(dǎo)航組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
Vue3.0?axios跨域請(qǐng)求代理服務(wù)器配置方式
這篇文章主要介紹了Vue3.0?axios跨域請(qǐng)求代理服務(wù)器配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04