element-ui多選表格禁用某一行不被選擇問題
更新時(shí)間：2023年10月18日 09:25:14 作者：將小寧
這篇文章主要介紹了element-ui多選表格禁用某一行不被選擇問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
element-ui多選表格禁用某一行不被選擇
1.首先使用element-ui 的表格組件
具體代碼如下
<el-table :data="tableData">
<el-table-column
type="selection"
:selectable="selectHandle"
label="多選"
align="center">
</el-table-column>
</el-table>其中tableData為綁定的表格數(shù)據(jù)，將表格第一列的type設(shè)置為selection，代表多選。
selectable綁定的selectHandle()方法僅對(duì) type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選，接下來只需要在selectHandle()方法中設(shè)置返回值就可以了，
如下：
//在參數(shù)row中可以獲得這一行的數(shù)據(jù),index為這一行的下標(biāo),
//我的需求是禁用第一行,所以在index === 0 的時(shí)候,返回false即可
selectHandle(row, index) {
return !(index === 0);
},element-ui表格表頭禁用全選功能
element-ui 貌似沒有提供禁用全選的屬性或者方法
所以只能我們自己動(dòng)手來禁用全選了
第一種情況，直接不用顯示全選按鈕，那我們可以這么做
.el-table__header-wrapper .el-checkbox{//找到表頭那一行，然后把里面的復(fù)選框隱藏掉
display:none
}
下面是效果圖
element提供了一個(gè)全選的事件
select-all 當(dāng)用戶手動(dòng)勾選全選 Checkbox 時(shí)觸發(fā)的事件
所以我們要是想要它不能全選可以這么寫
第二中利用全選方法，清除選擇
<el-table ref="multipleTable" @select-all="onSelectAll">
</el-table>
<script>
methods: {
onSelectAll () {
this.$refs.multipleTable.clearSelection()//這個(gè)是清除所有選擇項(xiàng)，當(dāng)選擇全部時(shí)，清除所有選擇項(xiàng)
}
}
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue數(shù)據(jù)響應(yīng)式原理知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給各位整理的是一篇關(guān)于vue數(shù)據(jù)響應(yīng)式原理知識(shí)點(diǎn)總結(jié)，有興趣的朋友們可以跟著學(xué)習(xí)下。2020-02-02
這篇文章給大家詳細(xì)介紹了 Vue3 的虛擬DOM生成規(guī)則,文章通過代碼示例和圖片介紹的非常詳細(xì),具有一定的參考價(jià)值,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化,所以 property 必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的,這篇文章主要介紹了導(dǎo)致VUE頁面不刷新的問題分析及解決方法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue2+elementui上傳照片方式(el-upload超簡單)
這篇文章主要介紹了vue2+elementui上傳照片方式(el-upload超簡單),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue如何監(jiān)聽元素寬高變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
我們?cè)?nbsp;vue 項(xiàng)目的目錄中經(jīng)?？吹?nbsp;env 開頭的文件,在文件內(nèi)聲明一些變量,這些變量就是一些配置變量,在不同環(huán)境下可使用的變量,本文我們將給大家介紹在vue開發(fā)中如何利用.env文件,需要的朋友可以參考下2023-10-10
關(guān)于vue中watch檢測(cè)到不到對(duì)象屬性的變化的解決方法
本篇文章主要介紹了關(guān)于vue中watch檢測(cè)到不到對(duì)象屬性的變化的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Vue3路由中path與redirect 的區(qū)別、使用場(chǎng)景及應(yīng)用分析
在 Vue 3 的路由系統(tǒng)（Vue Router 4）中,path 和 redirect 是兩個(gè)重要的概念,它們?cè)诼酚膳渲弥邪缪葜煌慕巧?本教程將詳細(xì)介紹它們的區(qū)別、使用場(chǎng)景以及實(shí)際應(yīng)用示例,感興趣的朋友一起看看吧2025-11-11
Animate.css這個(gè)動(dòng)畫庫,很多的動(dòng)畫在這個(gè)庫里面都定義好了,我們用的時(shí)候可以直接使用里面的類名就可以,下面我們就來看看如何在vue項(xiàng)目中使用Animate.css吧2023-08-08