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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
详解JavaScript作用域和作用域链
Mar 19 Javascript
layui表格数据重载
Jul 27 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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
银河香水:Galaxy Perfume
2019/03/25 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
初中数学教学反思
2014/01/16 职场文书
公司新年寄语
2014/04/04 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书