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 相关文章推荐
基于datagrid框架的查询
Apr 08 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
vue 实现tab切换保持数据状态
Jul 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
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php集成动态口令认证
2016/07/21 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
北京银河万佳Java面试题
2012/03/21 面试题
几道数据库的面试题或笔试题
2014/05/31 面试题
有模特经验的简历自我评价
2013/09/19 职场文书
HR喜欢的自荐信格式
2013/10/08 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
趣味活动策划方案
2014/02/08 职场文书
信用卡工资证明格式
2014/09/13 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书