主要以css实现

.tb-edit .el-input,
.tb-edit .el-input-number,
.tb-edit .el-select {
display: none;
width: 100%;
} .tb-edit .current-row .el-input,
.tb-edit .current-row .el-input-number,
.tb-edit .current-row .el-select {
display: inherit;
} .tb-edit .current-row .el-input + span,
.tb-edit .current-row .el-input-number + span,
.tb-edit .current-row .el-select + span {
display: none;
}

  

 <el-table
class="tb-edit"
border
highlight-current-row
height="500px"
size="mini"
:data="newData"
style="width: 100%"> <el-table-column
width="100px"
label="标号">
<template scope="scope">
<el-input size="mini" v-model="scope.row.stgId"
></el-input>
<span>{{scope.row.stgId}}</span>
</template>
</el-table-column>
<el-table-column
prop="noPumpPrice"
label="非泵"
width="70px"
>
<template scope="scope">
<el-input size="mini" v-model="scope.row.noPumpPrice"
></el-input>
<span>{{scope.row.noPumpPrice}}</span>
</template>
</el-table-column>
<el-table-column
prop="pumpPrice"
label="泵送"
width="70px"
>
<template scope="scope">
<el-input size="mini" v-model="scope.row.pumpPrice"
></el-input>
<span>{{scope.row.pumpPrice}}</span>
</template>
</el-table-column>
<el-table-column
prop="towerCranePrice"
label="塔吊"
width="70px"
>
<template scope="scope">
<el-input size="mini" v-model="scope.row.towerCranePrice"
></el-input>
<span>{{scope.row.towerCranePrice}}</span>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="执行时间"
min-width="138px"
>
<template scope="scope">
<el-date-picker type="datetime" size="mini" placeholder=""
v-model="scope.row.createTime" style="width: 100%;"></el-date-picker>
<span>{{scope.row.createTime}}</span>
</template>
</el-table-column>
</el-table>

完美实现。

实现思路,控制 span 和 input的显示隐藏,达到编辑效果, 又因为 vue数据双向绑定,两个框中引用的对应项为一个,所以轻松实现可以编辑的table

Element Ui中table实现表格编辑效果的更多相关文章

  1. UI中table写表格

  2. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  3. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  4. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  5. element ui 中的 resetFields() 报错&#39;resetFields&#39; of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  6. element ui中的一些小技巧

    最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台.  遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...

  7. element-ui中table表头表格错误问题解决

    我用的是element-ui v1.4.3 在iframe关闭和切换导航会引起有table的表格错位,解决办法: handleAdminNavTab: function(tab) { var admi ...

  8. VUE+Element UI实现简单的表格行内编辑效果

    原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...

  9. element ui中表格table翻页记忆勾选状态

    <el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...

随机推荐

  1. Spring基础——小的知识点

    一.整合多个配置文件 在 Spring Config 文件中,可以使用 <import> 标签将别的配置文件引入到一个文件中,进行配置文件的集成.该标签和 <bean> 标签同 ...

  2. Oracle的数据恢复——Flashback用法汇总

    /* 11g的flashbackup 分好几种,分别用途不一样. A.flashback database 闪回数据库,简单理解就是把数据库闪回到某个以前的时间点, 能恢复到的最早的SCN, 取决与F ...

  3. web-php绕过

    0x01.web-PHP的悖论1 题目: 链接:http://game.sycsec.com:2009/10111.php 解题思路: 1.首先,web对于选择二进制方向的我这个菜鸡绝对是十分懵逼的, ...

  4. 设计模式 --&gt; (2)单例模式

    单例模式 单例模式也称为单件模式.单子模式,可能是使用最广泛的设计模式.其意图是保证一个类仅有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享.如系统的日志输出,GUI应用必须是单鼠标 ...

  5. 详解 Symbol 类型

    ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证 ...

  6. 如何在Android中的Activity启动第三方应用程序?

    如何在点击某个按键后,执行启动第三方应用程序界面? /** * <功能描述> 启动应用程序 * * @return void [返回类型说明] */ private void startU ...

  7. springboot 2.0 mariadb hikari-cp连接池

    直到今天 2018年9月29日 10:00:38 ,hikari-cp 在maven 官方仓库最新版本为2.6 SpringBoot 2.0.5 控制台输出,默认的是 2.7.9 spring-boo ...

  8. 安卓工作室 文件浏览器 android studio File browser

    安卓工作室 文件浏览器 android studio  File browser 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-mail: ...

  9. Material Design In Action——重构bilibili客户端

    前言 哔哩哔哩动画是中国大陆的一家弹幕视频网站,在中国二次元用户中颇受欢迎. 哔哩哔哩动画之前推出过采用 Android Design 的 Android 客户端,虽然有使用了部分过时控件(例如 Sc ...

  10. adb connect 192.168.1.10 failed to connect to 192.168.1.10:5555

    adb connect 192.168.1.10 输出 failed to connect to 关闭安卓端Wi-Fi,重新打开连接即可