vue + elementui------ 项目表格多选根据状态来禁用---项目积累

原创已于 2024-12-04 22:18:09 修改 · 816 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-12-19 16:05:16 首次发布

vue+element 专栏收录该内容

47 篇文章

订阅专栏

首先如图效果
在这里插入图片描述
对elementUI中table表格的多选框进行可勾选和不可勾选的处理
给 type 属性为 selection 的加一个事件:selectable='selected’

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

在这里插入图片描述

methods中：

判断后台给返回的状态码
这个是直接写在里面了不用再额外调用方法了

selected(row, index) {
	if (row.WaitConfirmRecord.is_confirm == 1) {
		return false //不可勾选
	} else {
		return true; //可勾选
	}
},

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

温柔小生

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

ElementUI - ＜el-table＞表格 selection 设置的复选框禁止选中某些行

🏆 前端领域优质创作者

07-23

1万+

前言当表格设置 selection 开启复选框可选时，您可能需要禁用一些业务条件成立的行数据。例如，禁用表格中所有地址为秦皇岛市海港区居民的行数据，复选框无法选中，如下图所示效果：实现方法表格文档：https://element.eleme.cn/#/zh-CN/component/table ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索 selectable 。该属性接收一个函数，您只需要在函数中做出判断，返回 ture / false 即可确定该行

vue2 - elementUI表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消children（当子级全选中，父级自动勾选）

高级前端工程师

12-15

1万+

vue2，elementui，el-table树状表格多选，树形结构结合多选框使用，实现单选父子联动全选反选，勾选联动父级勾选，表格多选check父子联动，table表格children如何嵌入复选框，el-table使用多选框与树形数据写一个有半选全选功能的表格，el-table树形表格实现复选框多选效果，表格树状结构多选，每一个row都可以选中并且联动全选按钮，table选父带子选子带父，树形数据与懒加载，Table表格树形结构多选框选中父级时会选中子级，elementUI表格里树形结构嵌套复选框全选全

参与评论您还未登录，请先登录后发表或查看评论

【ElementUI】el-table中复选框禁用处理

前端知识分享喵

09-20

7154

el-table中复选框禁用处理

vuejs+element UI table表格中实现禁用部分复选框的方法

12-13

有时候我们构建这样带一列复选框的表格然后希望根据条件禁用某个列表项的选择框，可以这样写 HTML： JS：以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

Element - UI : el - table 多选框禁用

qq_45061461的博客

06-08

5840

点击确定,提交数据到父页面,然后保留此页面的勾选数据,下次进入的时候上次已经选中过的数据变成禁用状态,外边删除的时候,在此进入已经被删除的数据,在弹窗中变成可选取状态.2.:selectable="checkSelectSet" //selectable属性:是否不禁用状态 --- checkSelectSet自定义的方法名。开发表单弹窗的时候需要在父组件中显示弹窗选中的数据,然后第二次点击弹窗的时候需要禁用已经选中的数据。1.必须属性 type="selection" 这样才能变成多选。

传入el-table的数据结构

ZQH084811的博客

09-19

1016

表格展示 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="n

Vue3 + TS + Element-Plus 封装的 Table 表格组件

单飞吧的博客

04-30

1672

代码中主要增加了3个插槽，operationsStart 从操作栏开头增加按钮，operationsStart 从操作栏结尾增加按钮，还有一个插槽用来自定义列的内容，就是 TableModel里面的Key。

element el-table表格切换分页保留分页数据+限制多选数量

红烧咸咸鱼

07-01

615

element el-table表格切换分页保留分页数据+限制多选数量

Vue中el-tableb表格高亮、取消高亮、表格多选、表格分页多选、禁用某行、选择当前行

milk_tiger的博客

06-02

3367

el-tableb表格高亮、取消高亮、表格多选、表格分页多选、禁用某行、选择当前行

element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用，记录

最新发布

11-18

<think> 首先，用户的问题是关于Vue2和ElementUI中el-checkbox实现的功能。我需要基于提供的引用内容来回答。引用[1]和引用[2]都提到了el-checkbox-group和el-checkbox，但它们是针对特定问题的，比如动态禁用和v-model绑定错误。用户的问题是："我想了解在Vue2和ElementUI中使用el-checkbox实现了什么功能"，这是一个一般性的问题，询问el-checkbox的功能描述。系统指令要求： - 使用中文回答。 - 回答结构清晰，帮助用户逐步解决问题。 - 尽量保证回答真实可靠。 - 在回答中引用的段落末尾自然地添加引用标识，例如[^1]。 - 生成相关问题。 - 对于数学表达式，使用$...$或$$...$$，但在这个上下文中，可能不涉及数学表达式，所以可以忽略。 - LaTeX语法正确，但这里可能不需要。我的回答应该基于ElementUI的官方文档和Vue2的常见用法，因为引用内容只是例子，不是直接回答这个问题的。引用[1]讨论的是动态禁用复选框项，引用[2]讨论的是v-model绑定错误（应该绑定到数组而不是null）。由于用户的问题是关于功能描述的，我应该提供一个全面的解释，说明el-checkbox是什么，它能做什么。结构回答： 1. **介绍el-checkbox**：解释它是什么组件，在ElementUI中的作用。 2. **主要功能**：描述它可以实现的功能，如选择、多选等。 3. **关键特性**：提到如何绑定数据（使用v-model），支持单选和多选模式。 4. **在el-checkbox-group中的使用**：当需要一组复选框时，使用el-checkbox-group来管理。 5. **动态控制**：如引用中提到的，可以动态禁用某些选项。 6. **常见用途**：在表单中用于选择多个选项。最后，生成相关问题。确保回答真实可靠：基于ElementUI官方文档。我记得el-checkbox主要用于创建复选框，允许用户选择多个选项。在ElementUI中，它通常与el-checkbox-group一起使用来管理一组复选框。引用内容： - 引用[1]：提到动态禁用el-checkbox项，使用disabled属性，但需要动态设置。 - 引用[2]：强调v-model应该绑定到数组，否则会出错。初始化为null会导致错误，应初始化为空数组。在回答中，我需要在引用处添加标识。例如，当描述动态禁用时，可以引用[1]，当提到数据绑定为数组时，可以引用[2]。回答结构： - 开头直接回答问题。 - 逐步解释功能。 - 结束时生成相关问题。相关问题生成： - 基于主题，生成2-3个相关问题。 - 例如：如何动态禁用el-checkbox？如何绑定数据？常见错误是什么？最终回答： - 使用中文。 - 清晰、结构化。 </think>在Vue2和ElementUI中，`el-checkbox`是一个复选框组件，用于实现用户交互中的多选功能。它允许用户在表单中选择一个或多个选项，常用于设置、过滤或数据收集场景。结合`el-checkbox-group`（一个容器组件），可以实现对一组复选框的统一管理，如数据绑定、状态控制和事件处理。下面我将逐步解释其核心功能描述，基于ElementUI官方文档和常见实践，确保回答真实可靠。 ### 1. **基本功能：多选操作** - `el-checkbox`允许用户勾选或取消勾选单个选项。每个复选框独立工作，但当放置在`el-checkbox-group`中时，它们形成一组关联选项，便于批量处理。 - 例如，在用户设置页面，您可以用它实现“兴趣爱好”选择：用户可以选择多个选项（如“运动”“音乐”“阅读”）。 - 数据绑定通过Vue的`v-model`指令实现，通常绑定到一个数组（如`checkList: []`），该数组存储选中项的值。如果未正确初始化为数组，会引发错误（如`TypeError: Cannot read property 'length' of null`）[^2]。 ### 2. **动态状态控制** - `el-checkbox`支持动态禁用（disabled）某些选项，基于业务逻辑实时更新。例如，根据用户权限或数据状态，禁用不可用的选项。 - 在模板中，使用`:disabled`属性绑定动态变量（如`:disabled="isDisabled"`），然后在Vue的data或computed中定义`isDisabled`的逻辑。 - 引用示例中显示，可以通过遍历数组动态设置每个复选框的禁用状态，而不是固定值[^1]。 - 其他动态特性包括：选中状态（checked）、样式变化（如颜色），这些都可以通过Vue的响应式数据驱动。 ### 3. **事件处理和数据绑定** - `el-checkbox-group`提供`@change`事件，用于监听选中值的变化。当用户勾选或取消时，触发自定义方法（如`handleChange`），可执行数据提交或验证。 - 例如： ```html <el-checkbox-group v-model="checkList" @change="handleChange"> <el-checkbox label="option1">选项1</el-checkbox> <el-checkbox label="option2">选项2</el-checkbox> </el-checkbox-group> ``` - 数据绑定必须使用数组类型（如`checkList: []`），否则会导致运行时错误。引用中强调，初始值设为`null`会引发问题，应改为空数组[^2]。 ### 4. **常见应用场景** - **表单提交**：在用户注册或配置页面，收集多选数据（如选择多个标签）。 - **筛选过滤**：在数据表格中，作为过滤器组件（如按状态筛选任务）。 - **权限管理**：动态禁用选项，基于角色控制可操作性[^1]。 - 在Vue2中，结合ElementUI的主题和响应式设计，`el-checkbox`能无缝集成到SPA（单页应用）中，提升用户体验。总之，`el-checkbox`在Vue2和ElementUI中提供了灵活、高效的多选解决方案，通过数据驱动和事件机制简化开发。如需更详细代码示例，请参考[ElementUI官方文档](https://element.eleme.io/#/zh-CN/component/checkbox)。