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)文章

vue學(xué)習(xí)記錄之動(dòng)態(tài)組件淺析
動(dòng)態(tài)組件指的是動(dòng)態(tài)切換組件的顯示與隱藏,這篇文章主要給大家介紹了關(guān)于vue學(xué)習(xí)記錄之動(dòng)態(tài)組件的相關(guān)資料,本文通過(guò)示例代碼介紹介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
vue中el-table實(shí)現(xiàn)可拖拽移動(dòng)列和動(dòng)態(tài)排序字段
最近公司需要做個(gè)項(xiàng)目,需要拖拽表格和自定義表格字段,本文主要介紹了vue中el-table實(shí)現(xiàn)可拖拽移動(dòng)列和動(dòng)態(tài)排序字段,具有一定吃參考價(jià)值,感興趣的可以了解一下
2023-12-12
vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
這篇文章主要介紹了vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue?cli3.0創(chuàng)建Vue項(xiàng)目的簡(jiǎn)單過(guò)程記錄
Vue CLI是一個(gè)基于Vue.js進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue?cli3.0創(chuàng)建Vue項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題
今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue中fragment.js使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue中fragment.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
v-distpicker地區(qū)選擇器組件使用實(shí)例詳解
代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對(duì)地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲(chǔ)到form對(duì)象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下
2024-02-02
利用vue+elementUI設(shè)置省市縣三級(jí)聯(lián)動(dòng)下拉列表框的詳細(xì)過(guò)程
在做電商項(xiàng)目的時(shí)候需要添加修改收貨地址,如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)選取省市區(qū)地址困擾了我不少時(shí)間,這篇文章主要給大家介紹了關(guān)于利用vue+elementUI設(shè)置省市縣三級(jí)聯(lián)動(dòng)下拉列表框的相關(guān)資料,需要的朋友可以參考下
2022-08-08
elementui中使用el-tree控件懶加載和局部刷新
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue中混入mixins的使用方法
mixins（混入）官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式,這篇文章主要給大家介紹了關(guān)于vue中混入 mixins使用的相關(guān)資料,需要的朋友可以參考下
2021-10-10