el-table 選擇框根據(jù)條件設置某項不可選中的操作代碼
el-table 選擇框根據(jù)條件設置某項不可選中的操作代碼
效果如圖:實現(xiàn)某條數(shù)據(jù)不可選,其他數(shù)據(jù)可選

核心代碼: <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> 在選擇框的列上加上 :selectable="selectable" ,selectable是一個函數(shù),返回值為false的時候,表格列禁止選中
<template>
<div class="hello">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" :selectable="selectable"></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>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
tableData: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
},
{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
},
{
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}
]
};
},
methods: {
selectable(row, index) {
// 這里可以根據(jù)具體業(yè)務邏輯判斷,returnfalse就是不可選擇,row為表格行數(shù)據(jù)
// 設置第四行為不可選中
if (index == 3) {
return false;
} else {
return true;
}
}
}
};
</script>
<style scoped>
</style>補充:
elementUI實現(xiàn)表格多選中指定某些行不能被選中
今天項目中遇到一個需求,就是elementUI表格多選中需要符合要求的列才能被選中,否著該行不可選。
查看了下elementUI文檔,找到了 selectable 屬性:

該屬性的意思就是,通過判斷綁定方法的返回值是否為true來判斷該行是否可選。接下來就根據(jù)文檔的說明來編寫代碼就好了。
在選擇列元素中添加該屬性,如果表格中還未添加選擇列則先添加:
<el-table-column type="selection" width="55" :selectable="judgeSelect"></el-table-column>
定義方法:
judgeSelect(row,index){
return row.data == 1 // 返回true該行可選,返回false則不可選
}到此這篇關于el-table 的選擇框如何根據(jù)條件設置某項不可選中的文章就介紹到這了,更多相關el-table 選擇框根據(jù)條件設置某項不可選中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法
- vue?el-table實現(xiàn)動態(tài)添加行和列具體代碼
- Vue+EleMentUI實現(xiàn)el-table-colum表格select下拉框可編輯功能實例
- Vue動態(tài)設置el-table操作列的寬度自適應
- vue element-ui實現(xiàn)el-table表格多選以及回顯方式
- vue中el-table合并列的具體實現(xiàn)
- Vue element el-table-column中對日期進行格式化方式(全局過濾器)
- Vue中如何合并el-table第一列相同數(shù)據(jù)
- vue element-ui el-table組件自定義合計(summary-method)的坑
相關文章
BuildAdmin elementPlus自定義表頭添加tooltip方法示例
這篇文章主要介紹了BuildAdmin elementPlus 自定義表頭,添加tooltip實現(xiàn)方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
vite前端構(gòu)建Turborepo高性能monorepo方案
這篇文章主要為大家介紹了vite前端構(gòu)建Turborepo高性能monorepo方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08
vite+vue3.0+ts+element-plus快速搭建項目的實現(xiàn)
本文將結(jié)合實例代碼,介紹vite+vue3.0+ts+element-plus快速搭建項目的實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-06-06
Vue.js組件使用props傳遞數(shù)據(jù)的方法
這篇文章主要為大家詳細介紹了Vue.js組件使用props傳遞數(shù)據(jù)的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-10-10
Luckysheet?在vue中離線使用及引入報錯的解決方案(推薦)
這篇文章主要介紹了Luckysheet?在vue中離線使用方法及引入報錯的解決方案,將dist離線包在項目創(chuàng)建個文件夾放著,然后根據(jù)放置的位置在?index.html里面引入,下面通過案例給大家介紹我的項目里面放置的位置,需要的朋友可以參考下2022-10-10
詳解vue2.0+vue-video-player實現(xiàn)hls播放全過程
這篇文章主要介紹了詳解vue2.0+vue-video-player實現(xiàn)hls播放全過程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03

