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

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

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

實現(xiàn)效果：

默認選中表格的某一行或多行

實現(xiàn)思路

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

實現(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)建一個空數(shù)組用來存放默認數(shù)據(jù)
let list = []
//遍歷表格的數(shù)據(jù)，再遍歷需要在表格中反顯的數(shù)據(jù)，兩者的id一致
this.tableData.forEach((item) => {
     this.tableList.forEach(val => {
         if (val.id=== item.id) {
         	// 把判斷出來的默認表格數(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實現(xiàn)表格(el-table)默認選中的文章就介紹到這了,更多相關(guān)elementui el-table默認選中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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