欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年07月23日 11:22:34   作者：徐_三歲  
這篇文章主要介紹了elementui實現(xiàn)表格(el-table)默認(rèn)選中功能,本文給大家分享實現(xiàn)思路結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

實現(xiàn)效果：

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

實現(xiàn)思路

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

相關(guān)文章

  • vue學(xué)習(xí)記錄之動態(tài)組件淺析

    vue學(xué)習(xí)記錄之動態(tài)組件淺析

    動態(tài)組件指的是動態(tài)切換組件的顯示與隱藏,這篇文章主要給大家介紹了關(guān)于vue學(xué)習(xí)記錄之動態(tài)組件的相關(guān)資料,本文通過示例代碼介紹介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段

    vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段

    最近公司需要做個項目,需要拖拽表格和自定義表格字段,本文主要介紹了vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段,具有一定吃參考價值,感興趣的可以了解一下
    2023-12-12
  • vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)

    vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)

    這篇文章主要介紹了vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Vue?cli3.0創(chuàng)建Vue項目的簡單過程記錄

    Vue?cli3.0創(chuàng)建Vue項目的簡單過程記錄

    Vue CLI是一個基于Vue.js進(jìn)行快速開發(fā)的完整系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue?cli3.0創(chuàng)建Vue項目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • vue 解決路由只變化參數(shù)頁面組件不更新問題

    vue 解決路由只變化參數(shù)頁面組件不更新問題

    今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁面組件不更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue中fragment.js使用方法詳解

    Vue中fragment.js使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Vue中fragment.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • v-distpicker地區(qū)選擇器組件使用實例詳解

    v-distpicker地區(qū)選擇器組件使用實例詳解

    代碼添加了一個vDistpickerHandle的事件處理函數(shù)對地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲到form對象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下
    2024-02-02
  • 利用vue+elementUI設(shè)置省市縣三級聯(lián)動下拉列表框的詳細(xì)過程

    利用vue+elementUI設(shè)置省市縣三級聯(lián)動下拉列表框的詳細(xì)過程

    在做電商項目的時候需要添加修改收貨地址,如何實現(xiàn)三級聯(lián)動選取省市區(qū)地址困擾了我不少時間,這篇文章主要給大家介紹了關(guān)于利用vue+elementUI設(shè)置省市縣三級聯(lián)動下拉列表框的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • elementui中使用el-tree控件懶加載和局部刷新

    elementui中使用el-tree控件懶加載和局部刷新

    這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • vue中混入mixins的使用方法

    vue中混入mixins的使用方法

    mixins（混入）官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式,這篇文章主要給大家介紹了關(guān)于vue中混入 mixins使用的相關(guān)資料,需要的朋友可以參考下
    2021-10-10

最新評論