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实现给图片加链接
Aug 15 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
使用vue制作滑动标签
Sep 21 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
ftp类(myftp.php)
2006/10/09 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
javascript快速排序算法详解
2014/09/17 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python flask安装和命令详解
2019/04/02 Python
Python中的引用知识点总结
2019/05/20 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
pygame实现飞机大战
2020/03/11 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2016年寒假家长评语
2015/10/10 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang