VUE+Element UI实现简单的表格行内编辑效果的示例的代码


Posted in Javascript onOctober 31, 2018

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示

效果示例地址

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" >
  <style>
    * {
  margin: 0;
  padding: 0
}
body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  overflow: auto;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.tb-edit .el-input {
  display: none
}
.tb-edit .current-row .el-input {
  display: block
}
.tb-edit .current-row .el-input+span {
  display: none
}
  </style>
</head>

<body>
  <div id="app">
    <el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">
      <el-table-column label="日期" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>数据:{{tableData}}</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    },
    methods: {
      handleCurrentChange(row, event, column) {
        console.log(row, event, column, event.currentTarget)
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  })
</script> 
</html>

根据原理自定义效果

VUE+Element UI实现简单的表格行内编辑效果的示例的代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 #Javascript
详解vue 项目白屏解决方案
Oct 31 #Javascript
You might like
Terran建筑一览
2020/03/14 星际争霸
用PHP来写记数器(详细介绍)
2006/10/09 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
python中list循环语句用法实例
2014/11/10 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
销售工作岗位职责
2013/12/24 职场文书
经销商培训邀请函
2014/01/21 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
婚前协议书怎么写
2014/04/15 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
Python中for后接else的语法使用
2021/05/18 Python