elementUI如何在selection框下禁用/开启一整行

最新推荐文章于 2024-03-07 13:04:32 发布

原创最新推荐文章于 2024-03-07 13:04:32 发布 · 872 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

个人笔记

当前文章被收录于：

个人笔记

6 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

该篇博客详细介绍了如何在Vue.js应用中实现表格的选择功能。首先通过`<el-table-column type=selection width=55></el-table-column>`添加复选框列，然后利用`@select`事件监听用户的选择操作。在`selected`方法中，根据选择状态更新每一行的数据属性`isDisabled`，从而控制行的禁用状态。这个方法对于需要交互式表格的应用非常实用。

1.首先要使用

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

2.调用提供的select方法

<el-table @select="selected" >

3.写具体的methods

selected(selection, row) {
  let selected = selection.length && selection.indexOf(row) !== -1
  if (selected === true) {
    row.isDisabled = true    //这个isDisabled 是每行数据里都存在的一个属性
  } else {
    row.isDisabled = false
  }
},

标签

#vue.js #elementui