Element UI table参数中的selectable的使用

本文介绍了解决 ElementUI table 中 selectable 参数使用的难题,通过正确的实现方式确保只有特定 ID 的行才能被选择,避免了仅能处理数组首项的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Element UI table参数中的selectable的使用中遇到的坑:
页面:

             <el-table-column :selectable='selectable' type="selection" :reserve-selection="true">
             </el-table-column>
   

网上搜了说这样:

                            
selectable(row,index) {

       if(row.id==="10001"){
           return false
       }else {
           return true
       }
    }
返回true 即为可以勾选
反之 不可勾选

但是嘞 我的数据是一个id数组
于是我改成了这样:

   selectable(row,index) {
        this.arr(el=>{
            if(el==row.id){
                return false;
            }else{
                return true;
            }
        })
    }

然后不行,只渲染数组第一位 不能勾选;for循环也是一样的结果;这可如何是好;

说时迟那时快:灵光一现,改成了这样

 selectable(row,index) {
       if(this.arr.some(el=>{return el===row.id})){
           return false;
       }else{
           return true;
       }
    }

完美解决!

使用 Element UI 的表格组件时,若希望设置某一行或某些行为选中状态,可以通过 `toggleRowSelection` 方法实现。该方法用于切换某一行的选中状态,如果传入第二个参数,则可以直接设置该行是否选中。例如,在数据初始化时,可以通过遍历需要默认选中的数据项,并调用 `toggleRowSelection` 方法将这些行设置为选中状态[^2]。 具体实现如下: ```javascript data() { return { tableData: [], // 表格数据 selectedRows: [] // 需要默认选中的行数据 }; }, methods: { defaultSelection() { this.selectedRows.forEach(item => { this.$nextTick(() => { this.$refs.multipleTable.toggleRowSelection(item, true); }); }); } }, mounted() { this.defaultSelection(); } ``` 在模板中,确保为 `<el-table>` 组件添加 `ref="multipleTable"`,以便通过 `ref` 调用 `toggleRowSelection` 方法: ```html <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange"> <!-- 列定义 --> </el-table> ``` 此外,如果希望某些行默认选中且不可修改,可以结合 `selectable` 属性控制复选框是否可勾选。通过在数据初始化时调用 `toggleRowSelection` 方法,将指定行设置为选中状态,同时在 `selectable` 方法中返回 `false`,可以阻止用户手动更改这些行的选中状态[^4]。 例如,设置不可修改的默认选中行: ```javascript methods: { selectable(row, index) { // 如果 row 是默认选中的行,则返回 false,表示不可更改 return !this.selectedRows.includes(row); } } ``` 在模板中使用 `selectable` 属性: ```html <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange" :selectable="selectable"> <!-- 列定义 --> </el-table> ``` ### 通过 `highlight-current-row` 设置单选高亮 如果希望实现单选效果,并且高亮当前选中的行,可以使用 `highlight-current-row` 属性。该属性会自动高亮当前选中的行,通常与 `@row-click` 事件结合使用,以实现点击行时更新当前选中行的效果[^1]。 示例代码如下: ```html <el-table :data="tableData" highlight-current-row @row-click="handleRowClick"> <!-- 列定义 --> </el-table> ``` 在方法中更新当前选中行: ```javascript data() { return { currentRow: null }; }, methods: { handleRowClick(row) { this.currentRow = row; } } ``` ### 总结 - 使用 `toggleRowSelection` 方法可以实现默认选中某行。 - 结合 `selectable` 属性可以设置某些行默认选中且不可修改。 - 使用 `highlight-current-row` 属性可以实现单选高亮效果。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值