vue element el-table 禁止勾选

文章介绍了如何在ElementUI的el-table-column中使用selectable属性进行列的勾选设置,并展示了基于特定条件(如操作类型、分配者和节点标签)动态控制勾选状态的示例代码。

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

el-table-column 提供 selectable属性 默认true 例如:
        <el-table-column type="selection" :selectable="selected" header-align="center" align="center" width="50"></el-table-column>


    // 勾选条件
    selected (row, index) {
      if (row.newestHistory.operate !== 5 && row.newestHistory.assignee === this.$store.state.user.name && row.newestHistory.nodeTag !== 'XTY_KSJD') {
        return true // 可勾选
      } else {
        return false // 不可勾选
      }
    },

### Vue3 Element Plus El-Table 单选示例 为了实现在 `Vue3` 中使用 `Element Plus` 的 `el-table` 组件完成单行选择功能,可以按照如下方式构建: #### 安装依赖库 确保已经安装了必要的包: ```bash npm install vue@next npm install element-plus ``` #### 创建基础模板结构 创建一个简单的页面布局来展示表格及其操作按钮。 ```html <template> <div style="margin: 20px;"> <!-- 表格 --> <el-table :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <!-- 显示已选项信息 --> <p v-if="selectedRow">您选择了:{{ selectedRow.name }}</p> </div> </template> ``` #### 编写脚本逻辑 通过 JavaScript 来管理状态以及处理事件响应。 ```javascript <script setup> import { ref } from 'vue'; // 初始化表格数据 const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' } ]; // 存储当前被选中的行对象 let selectedRow = ref(null); function handleSelectionChange(selection) { // 当前只允许单选,则直接赋值给 selectedRow 变量 if (selection.length === 1) { selectedRow.value = selection[0]; } else { selectedRow.value = null; } } </script> ``` 上述代码展示了如何利用 `el-table-column` 设置带有复选框的选择列,并监听其变化以便追踪用户的交互行为。每当用户勾选不同的行时都会触发 `handleSelectionChange()` 方法,在这里可以根据实际需求调整业务逻辑[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值