element-ui多選表格禁用某一行不被選擇問題
更新時間：2023年10月18日 09:25:14 作者：將小寧
這篇文章主要介紹了element-ui多選表格禁用某一行不被選擇問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
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為綁定的表格數據，將表格第一列的type設置為selection，代表多選。
selectable綁定的selectHandle()方法僅對 type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選，接下來只需要在selectHandle()方法中設置返回值就可以了，
如下：
//在參數row中可以獲得這一行的數據,index為這一行的下標,
//我的需求是禁用第一行,所以在index === 0 的時候,返回false即可
selectHandle(row, index) {
return !(index === 0);
},element-ui表格表頭禁用全選功能
element-ui 貌似沒有提供禁用全選的屬性或者方法
所以只能我們自己動手來禁用全選了
第一種情況，直接不用顯示全選按鈕，那我們可以這么做
.el-table__header-wrapper .el-checkbox{//找到表頭那一行，然后把里面的復選框隱藏掉
display:none
}
下面是效果圖
element提供了一個全選的事件
select-all 當用戶手動勾選全選 Checkbox 時觸發(fā)的事件
所以我們要是想要它不能全選可以這么寫
第二中利用全選方法，清除選擇
<el-table ref="multipleTable" @select-all="onSelectAll">
</el-table>
<script>
methods: {
onSelectAll () {
this.$refs.multipleTable.clearSelection()//這個是清除所有選擇項，當選擇全部時，清除所有選擇項
}
}
</script>
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了Vue3渲染器與編譯器深入淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Element-UI中<el-cascader?/>回顯失敗問題的完美解決
我們在使用el-cascader控件往數據庫保存的都是最后一級的數據,那如果再次編輯此條數據時,直接給el-cascader傳入最后一級的數據,它是不會自動勾選的,下面這篇文章主要給大家介紹了關于Element-UI中<el-cascader?/>回顯失敗問題的完美解決辦法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue.js實現(xiàn)輸入框綁定的實例代碼,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了vue渲染函數render的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要給大家介紹了關于vue組件文檔（.md）中如何自動導入示例（.vue）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
Vue使用openlayers實現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細介紹了Vue如何使用openlayers實現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起動手嘗試一下2022-06-06
在做vue項目的過程中有時候會遇到一個問題,就是進行F5頁面刷新的時候,頁面的數據會丟失,這篇文章主要給大家介紹了關于Vue刷新后頁面數據丟失問題的解決過程,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue遮罩層如何阻止?jié)L動，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue+webpack 打包文件 404 頁面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁面空白的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02