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 import css实例代码
Jul 18 Javascript
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
行政管理专业推荐信
2013/11/02 职场文书
计算机专业毕业生的自我评价
2013/11/18 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书