Vue如何动态修改el-table的某列数据

 更新时间:2022年04月23日 16:52:38   作者:guohongyanghy  
这篇文章主要介绍了Vue如何动态修改el-table的某列数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

动态修改el-table的某列数据

1.对话框打开时调用函数open@opened="checked"

2.可编辑 

<el-table-column
    --------

visEdit="true"
      >

3.同步选中的数据List:multipleSelection ,函数  checked: function () 

设置el-table某一列点击出现输入框可以编辑

设置el-table 某一列点击出现输入框可以编辑,鼠标失去输入框焦点时输入框消失,显示对应的值。

如下图所示:

具体实现:

<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" style="width: 100%" size="mini" @cell-click="tabClick">      
        <el-table-column label="顺序" prop="adSort">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '顺序'">
              <el-input v-model="scope.row.adSort" type="number" maxlength="20" placeholder="请输入顺序" size="mini" @blur="inputBlur(scope.row)" />
            </span>
            <span v-else>{{ scope.row.adSort }}</span>
          </template>
        </el-table-column>
</el-table>

通过 tableRowClassName 设置每一行的index:

tableRowClassName ({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
}

行点击事件,当某一行被点击时,该行的某列设置 tabClickIndex:

由于

v-if="scope.row.index === tabClickIndex && tabClickLabel === '顺序'" 

所以当前点击行的某列会出现输入框:

// tabClick row 当前行 column 当前列
tabClick (row, column, cell, event) {
      switch (column.label) {
        case '顺序':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)
}

鼠标失焦事件:

// 失去焦点初始化
inputBlur (row) {
      // console.log('row', row)
      this.tabClickIndex = null
      this.tabClickLabel = ''     
}

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

相关文章

  • vue中预览zip的实现示例

    vue中预览zip的实现示例

    打包压缩成zip的东西,再解压,很麻烦,本文主要介绍了vue中预览zip的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • vue权限问题的完美解决方案

    vue权限问题的完美解决方案

    今天来说说权限管理,因为网上已经有很多关于这方面的很多内容,下面这篇文章主要给大家介绍了关于vue权限问题的完美解决方案,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • vue3 v-bind="$attrs"继承组件全部属性的解决方案

    vue3 v-bind="$attrs"继承组件全部属性的解决方案

    这篇文章主要介绍了vue3 v-bind=“$attrs“ 继承组件全部属性的解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue3+ts+vite使用el-table表格渲染记录重复情况

    vue3+ts+vite使用el-table表格渲染记录重复情况

    这篇文章主要给大家介绍了关于vue3+ts+vite使用el-table表格渲染记录重复情况的相关资料,我们可以通过合并渲染、数据缓存或虚拟化等技术来减少重复渲染的次数,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 详解vue-cli中使用rem,vue自适应

    详解vue-cli中使用rem,vue自适应

    这篇文章主要介绍了vue-cli使用rem,vue自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解

    这篇文章主要介绍了Vue.js进行查询操作的实例详解的相关资料,需要的朋友可以参考下
    2017-08-08
  • Vue实例挂载的全流程详解

    Vue实例挂载的全流程详解

    理解 Vue 实例的挂载过程,不仅有助于我们更好地掌握 Vue 的核心原理,还能提高我们在开发中的调试和优化能力,下面就跟随小编一起学习一下吧
    2024-12-12
  • 最新Vue过滤器介绍及使用方法

    最新Vue过滤器介绍及使用方法

    过滤器是vue为开发者提供的功能,常用于文本的格式化,过滤器应该被添加在JavaScrip表达式的尾部,由“管道符”进行调用,这篇文章通过案例给大家讲解Vue过滤器介绍及使用方法,需要的朋友参考下吧
    2022-11-11
  • 深入详解Vue3中的Mock数据模拟

    深入详解Vue3中的Mock数据模拟

    这篇文章主要为大家介绍了深入Vue3中的Mock数据模拟实现细节详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Vue项目中在父组件中直接调用子组件的方法

    Vue项目中在父组件中直接调用子组件的方法

    这篇文章主要给大家介绍了Vue项目中如何在父组件中直接调用子组件的方法,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11

最新评论