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)文章
這篇文章主要為大家介紹了Vue3渲染器與編譯器深入淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Element-UI中<el-cascader?/>回顯失敗問題的完美解決
我們?cè)谑褂胑l-cascader控件往數(shù)據(jù)庫保存的都是最后一級(jí)的數(shù)據(jù),那如果再次編輯此條數(shù)據(jù)時(shí),直接給el-cascader傳入最后一級(jí)的數(shù)據(jù),它是不會(huì)自動(dòng)勾選的,下面這篇文章主要給大家介紹了關(guān)于Element-UI中<el-cascader?/>回顯失敗問題的完美解決辦法,需要的朋友可以參考下2023-01-01
Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼
這篇文章主要介紹了Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了vue渲染函數(shù)render的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
vue組件文檔（.md）中如何自動(dòng)導(dǎo)入示例（.vue）詳解
這篇文章主要給大家介紹了關(guān)于vue組件文檔（.md）中如何自動(dòng)導(dǎo)入示例（.vue）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Vue使用openlayers實(shí)現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實(shí)現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起動(dòng)手嘗試一下2022-06-06
在做vue項(xiàng)目的過程中有時(shí)候會(huì)遇到一個(gè)問題,就是進(jìn)行F5頁面刷新的時(shí)候,頁面的數(shù)據(jù)會(huì)丟失,這篇文章主要給大家介紹了關(guān)于Vue刷新后頁面數(shù)據(jù)丟失問題的解決過程,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue遮罩層如何阻止?jié)L動(dòng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue+webpack 打包文件 404 頁面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁面空白的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02