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 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
YII实现分页的方法
2014/07/09 PHP
php中使用url传递数组的方法
2015/02/11 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
python实现TF-IDF算法解析
2018/01/02 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
详解Python字典的操作
2019/03/04 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
财务总监管理职责范文
2014/03/09 职场文书
志愿者活动总结
2014/04/28 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
Golang jwt身份认证
2022/04/20 Golang