vue el-table中使用el-select选中后无效的解决

 更新时间:2022年08月09日 14:47:07   作者:youyudexiaowangzi  
这篇文章主要介绍了vue el-table中使用el-select选中后无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

el-table使用el-select选中后无效

需求:表格中一行显示一条数据,数据中的某个属性要展示一列,并且再另一列中用el-select用作选择修改,修改后提示用户是从从原来的状态改为新状态。

表格数据从服务器返回,为了修改时获取原来的状态和新状态,给每一行数据新增了一个字段,但是点击下拉框的时候发现下拉框选择后没有生效,

几经调整后发现是添加新字段的原因 

 服务器返回数据:returnData:数组 

    this.users = returnData
    this.users.forEach(item=>{
        item.newState = parseInt(item.state)
    })

应该改成

    returnData.forEach(item=>{
        item.newState = parseInt(item.state)
    })
    this.users = returnData

el-table中selectable的使用

html代码

<el-table-column
    type="selection"
    width="55"
    :selectable="selectable"
    :reserve-selection="true"
    align="center">
</el-table-column>

js代码

 //判断是否禁用
checkStatus(row, index){
    if(this.arr.some(el=>{return el===row.id})){
         return false;
    }else{
         return true;
    }
 },         

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中el-table实现可拖拽移动列和动态排序字段

    vue中el-table实现可拖拽移动列和动态排序字段

    最近公司需要做个项目,需要拖拽表格和自定义表格字段,本文主要介绍了vue中el-table实现可拖拽移动列和动态排序字段,具有一定吃参考价值,感兴趣的可以了解一下
    2023-12-12
  • Vue 3 + Element Plus 封装单列控制编辑的可编辑表格组件的方法

    Vue 3 + Element Plus 封装单列控制编辑的可编辑表格

    在Web应用开发中实现表格数据编辑功能至关重要,本文将详细介绍如何使用Vue3和ElementPlus库来构建一个支持单列编辑的表格组件,本教程详细阐述了组件创建过程和数据绑定机制,帮助你快速掌握Vue3中表格编辑功能的实现,感兴趣的朋友一起看看吧
    2024-09-09
  • vue+echarts定时重新绘制以达到刷新的动效问题

    vue+echarts定时重新绘制以达到刷新的动效问题

    这篇文章主要介绍了vue+echarts定时重新绘制以达到刷新的动效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue的表单双绑和组件你了解吗

    Vue的表单双绑和组件你了解吗

    这篇文章主要为大家详细介绍了Vue表单双绑和组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Vue3.0结合bootstrap创建多页面应用

    Vue3.0结合bootstrap创建多页面应用

    这篇文章主要介绍了Vue3.0结合bootstrap创建多页面应用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue引入子组件命名不规范错误的解决方案

    vue引入子组件命名不规范错误的解决方案

    这篇文章主要介绍了vue引入子组件命名不规范错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3 echarts组件化及使用hook进行resize方式

    Vue3 echarts组件化及使用hook进行resize方式

    这篇文章主要介绍了Vue3 echarts组件化及使用hook进行resize方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 使用vue.js开发时一些注意事项

    使用vue.js开发时一些注意事项

    使用vue.js进行项目的开发已经有了一定的时间,在任务的过程中以及和不同的开发使用者交流中,逐渐对vue.js的使用心得有了一定的积累。本文主要给大家分享一些开发时需要注意的事项
    2016-04-04
  • vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    这篇文章主要介绍了vue-video-player 解决微信自动全屏播放问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • uniapp+vue3路由跳转传参的实现

    uniapp+vue3路由跳转传参的实现

    本文主要介绍了uniapp+vue3路由跳转传参的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11

最新评论