Element - UI <el-table-column>多選數據提交后禁用已提交的多選框

1. 通過 @selection-change="selectionChange" 將已選擇的數據存入selectData數組中

<el-table :data="tableData" class="my-5" @selection-change="selectionChange" >
//多選框已選擇的數據
const selectData = ref([]);
const selectionChange = (data) => {selectData.value = data;
}

2. 提交按鈕綁定提交事件

<el-button type="primary" @click="sub">提交</el-button>

提交后將已提交的數據提交狀態設置為true

const sub=()=>{selectData.value.forEach(item => {item.submitted = true;});
}

3. 通過 type="selection" 設置屬性為多選框? ?

? ? 通過 :selectable="checkSelectSet" 將提交的數據多選框設為禁用狀態

<el-table-column type="selection" width="50" align="center" :selectable="selectable"/>

屬性?selectable是否不禁用狀態后面跟自定義的方法名

const selectable = (row,index) => {return !row.submitted;
};//return : false  就是禁用
//return : true  不禁用

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/20963.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/20963.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/20963.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

在線圖片測試用例

開發中經常需要mock圖片&#xff0c;下面是可用于測試的在線圖片URL示例&#xff0c; https://picsum.photos/200/200?random2 https://picsum.photos/200/200?random1 https://picsum.photos/300/200?random2 https://picsum.photos/300/200?random1 說明&#xff1a…

前端環境配置(后端使用前端版,簡易版非專業前端)

聲明本人不是專業做前端的&#xff0c;只是平常開發有時候需要運行前端代碼&#xff0c;記錄一下配置環境。 安裝nvm nvm 即 (node version manager)&#xff0c;好處是方便切換 node.js 版本。 自己網上下載安裝包即可&#xff0c;傻瓜式安裝。 安裝注意事項 要卸載掉現有的 …

HALCON-從入門到入門-圖像格式的互相轉換

1.廢話 上次說到了圖片的讀取和寫入到本地&#xff0c;這次說一下圖片的格式相關。 位圖和矢量圖 photoshop處理出來的圖片肯定叫做圖片&#xff0c;那么coreDraw處理出來的圖片是不是也叫圖片。 之間就有區分&#xff0c;一種叫做位圖&#xff0c;一種叫做矢量圖 位圖和矢…

AI大模型探索之路-實戰篇13: 從對話到報告:打造能記錄和分析的Agent智能數據分析平臺

系列篇章&#x1f4a5; AI大模型探索之路-實戰篇4&#xff1a;深入DB-GPT數據應用開發框架調研 AI大模型探索之路-實戰篇5&#xff1a;探索Open Interpreter開放代碼解釋器調研 AI大模型探索之路-實戰篇6&#xff1a;掌握Function Calling的詳細流程 AI大模型探索之路-實戰篇7…

echarts 圖表不顯示的問題

是這樣的&#xff0c;點擊詳情&#xff0c;再點擊統計&#xff0c;切換的時候就不會顯示echarts圖表&#xff0c;剛開始使用的是next Tick&#xff0c;沒有使用定時器&#xff0c;后來加上了定時器就實現了如下所示&#xff1a; 代碼是如下 const chartContainer ref(null); …

【面試題-011】如何設計一個三高系統

設計一個“三高”系統&#xff08;即高可用、高性能、高并發&#xff09;需要綜合考慮系統架構、技術選型、運維管理等多個方面。以下是一些關鍵的設計原則和步驟&#xff1a; 1. 確定系統需求和目標 高可用&#xff1a;系統需要能夠承受故障&#xff0c;并在故障發生時快速恢…

【Text2SQL 論文】DBCopilot:將 NL 查詢擴展到大規模數據庫

論文&#xff1a;DBCopilot: Scaling Natural Language Querying to Massive Databases ???? Code: DBCopilot | GitHub 一、論文速讀 論文認為目前的 Text2SQL 研究大多只關注具有少量 table 的單個數據庫上的查詢&#xff0c;但在面對大規模數據庫和數據倉庫的查詢時時卻…

618商品網頁制作編程示例開發案列優質學習資料資源工具與案列應用場景開發文檔教程資料】

創建一個簡單的商品網頁可以用HTML、CSS和JavaScript來實現。這種網頁會包括商品的圖片、名稱、描述、價格和購買按鈕等。下面是一個詳細的源碼案例及其講解&#xff1a; 1. 文件結構 假設我們有以下文件結構&#xff1a; /product-page/imagesproduct.jpgindex.htmlstyle.c…

UML靜態圖-對象圖

概述 靜態圖包含類圖、對象圖和包圖的主要目的是在系統詳細設計階段&#xff0c;幫助系統設計人員以一種可視化的方式來理解系統的內部結構和代碼結構&#xff0c;包括類的細節、類的屬性和操作、類的依賴關系和調用關系、類的包和包的依賴關系。 對象圖與類圖之間的關系&…

python中獲取文件和圖片類型的方法

目錄 一. 使用第三方庫 filetype安裝 filetype 庫&#xff1a;示例代碼&#xff1a; 二. 使用第三方庫 Pillow&#xff08;針對圖片&#xff09;安裝 Pillow 庫&#xff1a;示例代碼&#xff1a; 三. 使用Python標準庫imghdr&#xff08;針對圖片&#xff09;示例代碼&#xff…

Linux 命令:tail

1. 寫在前面 本文主要介紹 Linux tail 命令&#xff1a;可用于查看文件的內容&#xff0c;有一個常用的參數 -f 常用于查閱實時更新的日志文件。 關注 公眾號 獲取最新博文&#xff1a; 滑翔的紙飛機 2. tail 命令 tail 命令的基本語法是&#xff1a; tail [OPTION]... [FIL…

Day46 動態規劃part06

完全背包問題 完全背包和01背包問題唯一不同的地方就是&#xff0c;每種物品有無限件。先遍歷物品還是先遍歷背包以及遍歷順序 根據遞推公式可知&#xff1a;每一個dp需要根據上方和左方的數據推出&#xff0c;只要保證數據左上方數據是遞推出來的這種兩個for循環的順序就是可…

【故障診斷】基于EMD的振動信號時頻分析新方法研究附matlab代碼

matlab % 步驟1&#xff1a;加載振動信號數據 load(‘vibration_signal.mat’); % 加載振動信號數據&#xff0c;假設信號存儲在變量signal中 % 步驟2&#xff1a;定義EMD函數 function imfs emd(signal) imfs []; % 存儲提取的IMF分量 while ~isMonotonic(signal)[imf, r…

PostgreSQL的內存參數

PostgreSQL的內存參數 基礎信息 OS版本&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本&#xff1a;16.2 pg軟件目錄&#xff1a;/home/pg16/soft pg數據目錄&#xff1a;/home/pg16/data 端口&#xff1a;5777PostgreSQL 提供了多種內存參數&#x…

一個高效的go語言字符串轉駝峰命名算法實現函數

在go語言的開發中我們經常需要對各種命名進行規范&#xff0c; 今天給大家介紹的是一個高效的將字符串轉 駝峰命名 &#xff08;即 首字母大寫的命名方式&#xff09;的函數。 // 字符串轉駝峰命名 // author tekintian <tekintiangmail.com> func CamelStr(str string) …

【python學習】Anaconda的介紹、下載及conda和pip換源方式(切換到國內鏡像源)

什么是Anaconda Anaconda 是一個專為數據科學和機器學習預裝了多種庫的Python發行版。 提供了包管理與環境管理的功能解決了多個版本python并存的問題解決了第三方包安裝問題 如何下載Anaconda 官網地址&#xff1a;https://www.anaconda.com/ 點擊右上角的 Free Download …

PostgreSQL 和Oracle鎖機制對比

PostgreSQL 和Oracle鎖機制對比 PostgreSQL 和 Oracle 都是業界廣泛使用的關系型數據庫管理系統&#xff0c;它們在鎖機制方面都有獨到的設計來控制并發訪問&#xff0c;確保數據的一致性和完整性。下面我們詳細比較一下這兩個數據庫系統的鎖機制。 1. 鎖類型 PostgreSQL P…

C語言王國——選擇與循環(1)

目錄 一、引言 二、選擇結構 1&#xff0c;if語句 1.1&#xff0c;if...else...語句 1.2&#xff0c;多分支語句 1.3懸空else的問題 2&#xff0c;switch語句 2.1&#xff0c;switch 2.2&#xff0c;break 2.3&#xff0c;default 一、引言 寫了幾個C語言代碼我發現C語…

ReduceTask工作機制

&#xff08;1&#xff09;Copy階段 ReduceTask從各個MapTask上遠程拷貝一片數據&#xff0c;并針對某一片數據&#xff0c;如果其大小超過一定閾值&#xff0c; 則寫到磁盤上 &#xff0c;否則直接放到內存中。 &#xff08;2&#xff09;Merge階段 在遠程拷貝數據的同時 &a…

go模擬經典面試題

講下MySQL事務 &#xff08;1&#xff09;事務的概念 事務就是對數據庫執行一系列操作&#xff0c;這些操作要么全部成功執行&#xff0c;要么全部失敗&#xff0c;不會存在部分成功的情況。 &#xff08;2&#xff09;事務的ACID特點 原子性&#xff1a;一個事務中的所有操…