vue项目中 elementUI 中表格多选框默认选中，但没有效果问题

最新推荐文章于 2024-12-15 17:32:12 发布
最新推荐文章于 2024-12-15 17:32:12 发布
阅读量5.5k 收藏 3
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 使用UI库时遇上的那些事～ 文章标签： el-table多选框默认选中 el-table默认选中 el-table选中没有效果 vue项目el-table选中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/louting249/article/details/104022350
在Vue项目中使用ElementUI的el-table组件时，遇到多选框默认选中但实际无效果的问题。通过分析，发现初始代码中存在配置错误。通过对this.enableLists设置为要勾选的数组，并正确绑定到selectTable中，确保表格包含勾选数组，成功解决了选中无效果的问题。

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

按官网上的 table表格中的多选
在这里插入图片描述
一开始我的代码是这样的：

this.enabelLists.forEach(row => {
   
   
   this.$refs.selectTable.toggleRowSelection(row, true)
最低0.47元/天 解锁文章

200万优质内容无限畅学
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表格里树形结构嵌套复选框全选全
vue3 - element-plus实现将table表格改为单选效果，将el-table表格实现单选，多选表格变为单选形式（Table多选框改成单选框，表格添加单选框，支持复杂表格嵌套数据多层勾选）
高级前端工程师
03-31 6505
vue3，element plus，表格Table，el-table，复选框改为单选，element-ui 表格控件实现单选功能，把多选框调整为只能单选，如何将el-table多选表格变为单选形式，el-table单选，复选框设置为单选,且可通过选择行选中复选框，elementPlus多选表格变单选，表格多选改为单选,且去除表头的多选框，el-table多选框改为单选框，table多选表格如何实现单选，如何修改ui为圆形单选radio，check复选框多选变为单选，二级嵌套表格带下级如何修改为单选表格，选中
vue multiple el-select多选框勾选后无响应
liao_sp的博客
03-30 1511
vue multiple el-select勾选后无响应，用强制更新视图方法 $forceUpdate vm.$forceUpdate() 使Vue实例重新渲染
TypeScript 错误property does not exist on type Object
热门推荐
weixin_30410999的博客
11-30 1万+
TypeScript 错误property does not exist on type Object 在TypeScript中如果按JS的方式去获取对象属性，有时会提示形如Property 'value' does not exist on type 'Object'的错误。具体代码如下： var obj: Object = Object.create(null); obj.value = "v...
ElementUI 表格多选框默认全选
InterestAndFun的博客
12-01 3515
先在el-table中用ref标记一下 参考代码 <el-table :data="tableData" height="400" max-height="400" ref=multipleTable ></el-table> 在数据获取完成的方法中，加入 this.$refs.multipleTable.toggleAllSelection();这行代码即可 注意事项 当列表的数据量过大时，页面的dom元素过多，如果使用上面所述方式，会导致页面直接卡死，浏览器提示页面无响.
element table默认选择没有反应
luback的博客
04-04 1003
注意点3：this.$refs.multipleTable.toggleRowSelection()的使用写得更加详细。注意点2：使用this.$nextTick(()=>{} ，节点都更新完后再触发。设置table被选中项，注意三点，基本上可以解决。注意点1：rows，传的值要与选中对象项保持一致。
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
qq3892997的博客
11-02 6756
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
elementUI多选框反选的实现代码
10-17
在本文中，我们将详细探讨如何在使用Element UI进行Web开发时实现多选框的反选功能。Element UI是一个基于Vue.js的组件库，它提供了一套完整的界面组件来帮助开发者快速构建现代化的Web界面。 首先，我们需要了解...
vue3 - elementPlus表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消，children当子级全选中，父级自动勾选
高级前端工程师
12-15 1万+
vue3，Element Plus，el-table树状表格多选，表格树状结构多选，每一个row都可以选中并且联动全选按钮，table选父带子选子带父，树形数据与懒加载，Table表格树形结构多选框选中父级时会选中子级，表格checkbox复选框的全选反选，树形结构结合多选框使用，实现单选父子联动全选反选，勾选联动父级勾选，表格多选check父子联动，table表格children如何嵌入复选框，el-table使用多选框与树形数据写一个有半选全选功能的表格，el-table树形表格实现复选框多选效果，有分
el-table中的toggleRowSelection 选中目标没有选中效果
EsquireY的博客
11-09 1357
el-table中的toggleRowSelection 选中目标没有选中效果。
element table表单 默认选中多条数据 toggleRowSelection不起作用解决办法
alokka的博客
07-04 2876
这是因为created生命周期执行的时候 DOM 还没有渲染，el-table 表格还没有渲染完成 我们就直接使用了this.$refs.XXX.toggleRowSelection(item)方法，就不会生效。 直接在外层套一层this.$nextTick()就可以了 this.$nextTick(() => { list.forEach((item) => { if (item.gasStatus === 1) { th
vue中elementui select标签选中后不生效问题
weixin_45538554的博客
06-01 2887
select标签选中后不生效，此时可以在标签属性中加上，@change事 。比如我这里写的是。（ps注意是change事件，不要写成@focus事件，虽然感觉可以行得通，但事实上却不起作用） @change=“chooseDTChange” chooseDTChange(){ this.$forceUpdate() } ...
elemetUI Table表格多选无数据时，复选框显示disabled点击却可勾选
岳公子
05-25 1226
看了下文档，可以通过绑定select-all事件，调用clearSelection方法解决显示的问题。 事件名 说明 参数 select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection 方法名 说明 参数 clearSelection 用于多选表格，清空用户的选择 — <el-table ref="a" :data="tableData" style="width: 100%" ..
【项目经验】：elementui多选表格默认选中
weixin_70245286的博客
09-17 4593
elementui多选表格默认选中
vue3：el-table多选框设置默认选中，翻页保留选中状态
CYL_2021的博客
04-17 1万+
el-table多选框设置默认选中，进行翻页，之前选中的数据没有保留选中状态
Vue3 element plus 中table组件多选，默认根据接口返回条件选中
Feast_aw的博客
07-24 2845
【代码】Vue3 element plus 中table组件多选，默认根据接口返回条件选中。
el-table 设置了selection多选，选中状态不回显处理
m0_49016709的博客
09-22 8154
关于回显的处理element 中Table Methods 有一个方法 toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） 设置某一行选中 (这里是vue3) table.value.toggleRowSelection(item) 设置某一行不选中 table.value.toggleRowSelection(item，false) 下面是完整代码 <template>
ElementPlus 表格默认选中失效
qq_43371595的博客
03-23 1379
背景：需要标签和table选中做联动 proxy.$nextTick(() => { checkStationTable.value.toggleRowSelection(item, undefined) }） 同样为table绑定ref，首次进去为undefined，我们就判断一手他的length，正常来说上面这种就可以了，然鹅我这并不管用，然后用了uni中的终极办法，setTimeout,就OK了 if (checkStationTable.value.length != 0) {
elementui el-select多选进行初始化后，重新选择选不上问题完美解决。
qq_25529689的博客
08-19 1684
问题描述： elect多选进行初始化后，重新选择选不上？ 这个问题之前也遇到了，但是一直都是采用两个变量解决的。今天百度终于找到一个好的解决方法。 初始化后，点击选项选择不上，后来加了@change=“selectChangeMethod”进行了强制刷新，然后完美解决。 ...
vue2中表格实现多行拖拽
最新发布
04-28
<think>嗯，用户想在Vue2中实现表格的多行拖拽功能。我需要回忆一下之前处理类似问题的方法。记得Vue本身不直接支持拖拽，但可以通过HTML5的拖拽API或者第三方库如Sortable.js来实现。用户提到的是多行拖拽，可能需要同时拖动多个表格行，这比单行更复杂。 首先，用户使用的是Vue2，所以需要确认兼容性。我之前在引用中看到用户提到了Sortable.js，这可能是个好选择。引用[2]里提到了Vue和ElementUI结合Sortablejs实现拖拽，应该可以参考。但用户可能需要多选功能，比如按住Ctrl或Shift选择多行，然后拖动。 接下来，需要处理几个步骤：如何实现多选，如何绑定拖拽事件，以及如何更新数据。对于多选，可以在表格行添加复选框，或者通过点击事件记录选中的行。然后，当拖动开始时，检查当前选中的行，并将这些行的数据传递到拖拽事件中。 使用Sortable.js的话，可能需要配置group选项，设置拖拽和放置的容器。但默认情况下，Sortable.js处理的是单个元素的拖动，所以需要自定义处理多选。可能需要监听mousedown或click事件来记录选中的行，然后在拖拽时处理多个元素的数据更新。 另外，数据更新后，需要确保Vue的响应式系统能检测到变化。可能需要使用Vue.set或者替换整个数组来触发更新。在拖拽结束时，获取拖动的元素列表，重新排序数据源，并更新到表格中。 还要考虑样式问题，比如被选中的行高亮显示，拖动时的视觉效果。可能需要添加CSS类来标识选中状态和拖拽时的占位符。 可能会遇到的问题包括：如何同步多个选中行的拖动，如何防止浏览器默认的拖拽行为干扰，以及如何处理跨页拖拽（如果表格分页的话）。需要确保在拖拽事件中阻止默认行为，并正确更新数据的位置。 最后，测试代码是否正常工作，确保多选和拖拽后的数据顺序正确，并且界面响应及时。可能还需要处理边界情况，比如没有选中任何行时的拖拽，或者拖动到无效区域的情况。</think>在Vue2中实现表格多行拖拽功能，可以通过以下步骤结合第三方库`Sortable.js`实现（与ElementUI兼容性良好）： ### 一、基础实现步骤 1. **安装依赖** ```bash npm install sortablejs --save ``` 2. **组件实现逻辑** ```vue <template> <el-table :data="tableData" row-key="id" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <!-- 其他列 --> </el-table> </template> <script> import Sortable from 'sortablejs' export default { data() { return { tableData: [], // 表格数据需包含唯一标识字段如id selectedRows: [] // 存储选中的多行数据 } }, mounted() { this.initSortable() }, methods: { handleSelectionChange(selection) { this.selectedRows = selection }, initSortable() { const tbody = document.querySelector('.el-table__body-wrapper tbody') Sortable.create(tbody, { group: 'rowGroup', handle: '.el-checkbox__original', // 拖动句柄 animation: 150, onEnd: ({ newIndex, oldIndex }) => { // 处理多行拖拽逻辑 this.reorderRows(oldIndex, newIndex) } }) }, reorderRows(oldIndex, newIndex) { const movedRows = this.selectedRows const data = [...this.tableData] // 删除旧位置数据 const removed = data.splice(oldIndex, movedRows.length) // 插入到新位置 data.splice(newIndex, 0, ...removed) this.tableData = data } } } </script> ``` ### 二、关键优化点 1. **多选同步**：通过`@selection-change`事件获取选中行数据[^2] 2. **拖拽限制**：添加CSS防止非选中行被拖动 ```css .el-table__row:not(.selected-row) .el-checkbox__original { pointer-events: none; } ``` 3. **数据更新**：使用`Vue.set`或替换数组触发响应式更新 ### 三、扩展功能建议 1. **跨表格拖拽**：配置不同的Sortable组实现 2. **动画优化**：添加`ghostClass`配置拖动占位符样式 3. **服务端同步**：在onEnd事件中发送AJAX请求
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值