快捷導(dǎo)航

el-table 選擇框根據(jù)條件設(shè)置某項(xiàng)不可選中的操作代碼

更新時(shí)間：2024年03月14日 10:44:09 作者：程序猿小野

這篇文章主要介紹了el-table 選擇框根據(jù)條件設(shè)置某項(xiàng)不可選中的操作代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

el-table 選擇框根據(jù)條件設(shè)置某項(xiàng)不可選中的操作代碼

效果如圖：實(shí)現(xiàn)某條數(shù)據(jù)不可選，其他數(shù)據(jù)可選

核心代碼： <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> 在選擇框的列上加上 :selectable="selectable" ，selectable是一個(gè)函數(shù)，返回值為false的時(shí)候，表格列禁止選中

<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è)務(wù)邏輯判斷，returnfalse就是不可選擇，row為表格行數(shù)據(jù)
            // 設(shè)置第四行為不可選中
            if (index == 3) {
                return false;
            } else {
                return true;
            }
        }
    }
};
</script>
<style scoped>
</style>

補(bǔ)充：

elementUI實(shí)現(xiàn)表格多選中指定某些行不能被選中

今天項(xiàng)目中遇到一個(gè)需求，就是elementUI表格多選中需要符合要求的列才能被選中，否著該行不可選。

查看了下elementUI文檔，找到了 selectable 屬性：

該屬性的意思就是，通過(guò)判斷綁定方法的返回值是否為true來(lái)判斷該行是否可選。接下來(lái)就根據(jù)文檔的說(shuō)明來(lái)編寫代碼就好了。

在選擇列元素中添加該屬性，如果表格中還未添加選擇列則先添加：

<el-table-column type="selection" width="55" :selectable="judgeSelect"></el-table-column>

定義方法：

judgeSelect(row,index){
	return row.data == 1 // 返回true該行可選，返回false則不可選
}

到此這篇關(guān)于el-table 的選擇框如何根據(jù)條件設(shè)置某項(xiàng)不可選中的文章就介紹到這了,更多相關(guān)el-table 選擇框根據(jù)條件設(shè)置某項(xiàng)不可選中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: