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

目录
  • 动态修改el-table的某列数据
  • 设置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 = ''
}

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

(0)

相关推荐

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • vue实现动态控制el-table表格列的展示与隐藏

    本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下 1.引入el-table组件,这里我直接用官网的示例代码 <template>     <div class="page">         <el-popover width="60" trigger="click">             <el-checkbox-group v-model=&

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

  • 动态实现element ui的el-table某列数据不同样式的示例

    问题描述 在饿了么ui的框架中,输入数据el-form,输出数据el-table.有时候产品想让枯燥的表格来点动态的样式,比如不同的内容展示不同的样式,对于这个需求,其实方式有很多种,本文列举两种,以供参考. 实现方式一 效果图如下 代码如下 <template> <div id="app"> <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色.蜀国黑色.吴国蓝色) --> <el-table :data="tabl

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • vue中动态修改animation效果无效问题详情

    目录 问题描述 问题原因 解决办法 1.将 keyframes 下的内容放到 scoped 的外边 2.去掉scoped 问题描述 鼠标移入移出,并没有出现闪动: <template> <div class="alarmIcon" ref="alarmIcon" @mouseenter="handleEnter" @mouseleave="handleLeave" ></div> </

  • vue如何动态修改meta的title

    目录 如何动态修改meta的title 动态修改路由的meta.title 需求 解决办法 如何动态修改meta的title 需求:不去掉原生导航栏的情况下实现详情页的动态title(列表页query携带参数name到详情页实现动态title) @on-item-click="$router.push({path: '/yunCrm', query: {id:item.id,name:item.name}})" 列表页点击携带name到详情页职位详情页的title,并且赋值给route

  • vue如何动态修改$router参数

    目录 vue动态修改$router参数 动态修改router路由所带参数 vue动态修改$router参数 // 创建一个包含当前 URL 参数的对象 export const getURLParameters = (url) =>   (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(     (a, v) => (       (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf

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

    目录 动态修改el-table的某列数据 设置el-table某一列点击出现输入框可以编辑 动态修改el-table的某列数据 1.对话框打开时调用函数open@opened="checked" 2.可编辑 <el-table-column     -------- visEdit="true"       > 3.同步选中的数据List:multipleSelection ,函数  checked: function () 设置el-table某一列点

  • vue 动态修改a标签的样式的方法

    公司要做一个类似今日头条的项目,用前后端分离的方式做成HTML5页面,先在微信中运行,领导说想看看效果怎么样.今日头条头部的导航是可以滚动和添加类别的,我们这个项目也是一样.所以在导航这个地方就需要在点击不同分类的同时,样式也是跟着变的,我在网上搜索了一下,发现了下面的代码,简洁清淅,不过具体网址忘记了,先把代码贴出来给大家看一下,想知道网址的可以去网上搜索一下. <!DOCTYPE html> <html lang="en"> <head> <

  • 聊聊Vue 中 title 的动态修改问题

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一直是万年不变的 vue-project.理所应当的,这个问题被测试爸爸提了一个大大的缺陷. 犯了错的我赶紧解决这个问题,但是经过一段时间的摸索,我却发现,这一个小小的问题,却有着很多不同的解法. 首先,毫无疑问的是,我们应该使用 document.title 方法通过 DOM 操作来修改 title

  • 基于Vue的SPA动态修改页面title的方法(推荐)

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了.网上有几种方案: 1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改 缺点:App.Vue默认的e

  • Vue动态修改网页标题的方法及遇到问题

    业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 结合业务直接在Vue生命周期函数 created 和 mounted 中,给 document.title赋值. <script> import axios from 'axios' export default { created () { document.title = '功能授权' },

  • JS实现动态修改table及合并单元格的方法示例

    本文实例讲述了JS实现动态修改table及合并单元格的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-

随机推荐