iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue如何动态修改el-table的某列数据
  • 241
分享到

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

2024-04-02 19:04:59 241人浏览 独家记忆
摘要

目录动态修改el-table的某列数据设置el-table某一列点击出现输入框可以编辑动态修改el-table的某列数据 1.对话框打开时调用函数open@opened="

动态修改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 = ''     
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue如何动态修改el-table的某列数据

本文链接: https://www.lsjlt.com/news/147032.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue如何动态修改el-table的某列数据
    目录动态修改el-table的某列数据设置el-table某一列点击出现输入框可以编辑动态修改el-table的某列数据 1.对话框打开时调用函数open@opened="...
    99+
    2024-04-02
  • Vue怎么动态修改el-table的某列数据
    这篇文章主要介绍“Vue怎么动态修改el-table的某列数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么动态修改el-table的某列数据”文章能帮助大家解决问题。动态修改el-tab...
    99+
    2023-06-30
  • sqlserver如何修改某一列数据
    要修改SQL Server中某一列的数据,您可以使用UPDATE语句。以下是一个示例: 假设您有一个名为“Employee”的表,其...
    99+
    2024-04-08
    sqlserver
  • vue如何动态修改$router参数
    目录vue动态修改$router参数动态修改router路由所带参数vue动态修改$router参数 // 创建一个包含当前 URL 参数的对象 export const getUR...
    99+
    2024-04-02
  • vue实现动态控制el-table表格列的展示与隐藏
    本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下 1.引入el-table组件,这里我直接用官网的示例代码 <templ...
    99+
    2024-04-02
  • element-ui中如何给el-table的某一行或某一列加样式
    目录1.查阅element-ui官方文档后我们发现有如下属性 :cell-class-name: 2.为表格el-table添加该属性,并指定函数名: :cell-class-na...
    99+
    2023-01-03
    el-table某一行加样式 el-table 某一列加样式
  • vue如何动态修改meta的title
    目录如何动态修改meta的title动态修改路由的meta.title需求解决办法如何动态修改meta的title 需求:不去掉原生导航栏的情况下实现详情页的动态title(列表页q...
    99+
    2024-04-02
  • vue 使用el-table循环轮播数据列表的实现
    目录使用el-table循环轮播数据列表vue el-table简单轮播使用el-table循环轮播数据列表 因为是在内网开发,安装插件导包进去非常麻烦,有条件的可以去下载插件实现,...
    99+
    2024-04-02
  • oracle怎么修改某一列的数据
    要修改Oracle数据库表中某一列的数据,可以使用UPDATE语句。以下是一个示例: 假设有一个名为“employees”的表,包含...
    99+
    2024-03-07
    oracle
  • sql怎么修改某一列的数据
    要修改某一列的数据,可以使用UPDATE语句。以下是一个示例: UPDATE 表名 SET 列名 = 新值 WHERE 条件...
    99+
    2024-04-09
    sql
  • php数据库如何修改某值
    这篇文章主要为大家展示了“php数据库如何修改某值”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“php数据库如何修改某值”这篇文章吧。php数据库修改某值的方法:1、选择要操作的数据库并连接;2...
    99+
    2023-06-22
  • hive如何修改某一条数据
    要修改Hive中的某一条数据,可以使用Hive的UPDATE语句。以下是一个示例: UPDATE table_name SET co...
    99+
    2024-04-08
    hive
  • Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法
    目录项目场景:问题描述:原因分析:推荐解决方案:项目场景: 要实现这样的一个功能:为列表特定某一行的背景高亮,如下图,实现某一行的权限字段是超级,那么这行就高亮显示的效果 问题描述...
    99+
    2023-01-03
    修改el-table背景色无效 element row-class-name 修改
  • vue如何动态修改a标签的样式
    今天小编给大家分享一下vue如何动态修改a标签的样式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。代码如下:<!DOC...
    99+
    2023-07-04
  • layui如何异步加载table表中某一列数据
    这篇文章将为大家详细讲解有关layui如何异步加载table表中某一列数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。layui中table加载数据时 如果数据存放在不...
    99+
    2024-04-02
  • Pandas:如何修改DataFrame中某一列的值?
    写这篇博客主要是因为在修改DataFrame列值的时候经常遇到bug,但到目前还没把这种错误复现出来。   DataFrame是Pandas中的主要数据结构之一,本篇博客主要介绍如何DataFr...
    99+
    2023-09-01
    pandas python 数据分析
  • vue单一组件下如何动态修改数据时的全部重渲染
    这篇文章主要为大家展示了“vue单一组件下如何动态修改数据时的全部重渲染”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue单一组件下如何动态修改数据时的全部重...
    99+
    2024-04-02
  • php table表格一行的数据如何修改
    在 PHP 中,我们可以通过以下的步骤来修改表格中某一行的数据:首先,我们需要连接到数据库,并且查询需要修改的数据。这个查询可以是任何一种查询,例如 SELECT、UPDATE 等。在查询返回结果集之后,我们可以使用 foreach...
    99+
    2023-05-24
  • oracle如何修改列的数据类型
    要修改Oracle表的列数据类型,需要使用ALTER TABLE语句。以下是一些示例: 修改列的数据类型: ALTER TABL...
    99+
    2024-04-15
    oracle
  • vue如何使用el-table遍历循环表头和表体数据
    目录使用el-table遍历循环表头和表体数据这是表头数据这是表体数据最终循环出来的结果el-table动态循环展示表头和数据项目场景问题描述使用el-table遍历循环表头和表体数...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作