element-ui 中 table 设置默认选中

20 篇文章 0 订阅
16 篇文章 0 订阅

toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中

注意:调用toggleRowSelection这个方法 需要获取真实dom 所以需要注册 ref 来引用它 

相关操作:

(一).默认选中

1.当数据源固定在table的

<script>
export default {   
    mounted() {
         this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);
    }
}
</script>

(二).点击tr选中

1.在table中设置 @row-click="handleCurrentChange"

<template>
    <el-table :data="tableData3"  ref="multipleTable" @row-click="handleCurrentChange"></el-table>
</template>

<script>
export default { 
    methods: {
        handleCurrentChange(row, event, column){
            this.$refs.multipleTable.toggleRowSelection(row,true);//点击选中
        }
    }
}
</script>

(三).获取选中的值

1.设置table 中@selection-change="selsChange"

2.data 中设置sels:[]

<template>
<el-table :data="tableData3"  ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange"></el-table>
</template>

<script>
export default {
    methods: {
        selsChange( val){
            this.sels=val;
            console.log(this.sels)
        }
    }
}
</script>

转载自:https://www.cnblogs.com/hyhyhy/articles/10458095.html

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在使用element-uitable组件并设置fixed属性后,如果在表格的复选框处点击选择时,可能会出现高亮显示问题。 通常,当表格的列设置为fixed属性时,该列的宽度将固定不变,无法随表格的水平滚动而移动。这是为了保持固定的布局,以便在表格内容较多时的视觉统一性和可读性。 然而,当我们在fixed列的复选框处点击选择时,由于默认的样式设置,点击复选框将触发复选框所在单元格的选中状态,而不是复选框本身的高亮显示。这可能会导致用户选择复选框时,无法正确地看到复选框是否被选中的视觉反馈。 要解决这个问题,我们可以使用element-ui的slot插槽来自定义复选框的显示方式。通过在表格组件添加一个slot插槽,并在插槽添加复选框元素及其样式,我们可以实现在fixed列点击复选框时,正确高亮显示复选框的效果。 具体代码示例如下: ```html <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" fixed align="center" width="50" > <template slot-scope="{ row }"> <div class="custom-checkbox"> <el-checkbox v-model="row.selected"></el-checkbox> </div> </template> </el-table-column> <!-- 其他表格列 --> </el-table> ``` 在上述代码,我们使用了slot插槽来自定义复选框的显示方式。通过`<template slot-scope="{ row }">`,我们可以获取到每一行的数据对象,并在`<el-checkbox>`元素使用`v-model="row.selected"`来实现复选框的选中状态。 通过添加自定义的样式,例如`.custom-checkbox`,我们可以为复选框设置高亮显示效果。 这样一来,当我们在fixed列点击复选框时,复选框会正确高亮显示,以提供正确的视觉反馈。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值