vue 封装自定义组件之tabal列表编辑单元格组件实例代码


Posted in Javascript onSeptember 07, 2017

vue 封装自定义组件

tabal列表编辑单元格组件

<template>
 <div class="editable-cell">
  <div class="editable-cell-input-wrapper" v-if='editable'>
   <el-input class="editInput" v-model="cellValue" placeholder="请输入内容" v-loading="editLoading" size="small"></el-input>
   <el-button type="text"><i class="el-icon-check" @click='check'></i></el-button>
  </div>
  <div class="editable-cell-text-wrapper" v-else>
   {{cellValue || ' '}}
   <el-button type="text"><i class="el-icon-edit" @click='edit'></i></el-button>
  </div>
 </div>
</template>
<script>
import util from '../../common/js/util';
import $ from 'jquery';
import axios from './../../common/ajax/axios.js';
export default { 
 data() {
  return { 
   cellValue:this.value,
   editable:false,
   editLoading:false,
  };
 },
 props : [
  'value'
 ],
 methods: {
  check(){
   const self = this;
   function callback(){
    self.editLoading = false;
    self.editable=false;
   }
   this.editLoading = true;
   self.$emit('cellChange',self.cellValue,callback)
  },
  edit(){
   this.editable = true;
  }
 }
};
</script>
<style lang="less" scoped>
.taskDetail{
 margin-left: 10px;
 margin-top:10px;
}
.editInput{
 width: 200px;
 height: 30px;
}
.el-icon-edit{
 margin-left: 20px;
}
.el-icon-check{
 margin-left: 20px;
}
</style>
<style>
.editInput .el-loading-spinner .circular{
 width:20px;
}
</style>

vue 封装自定义组件之tabal列表编辑单元格组件实例代码

解释一下:

props:父组件传递给子组件的值;

$emit(‘方法名',数据) 返回父级数据,会触发父组件中调用子组件的方法;

父组件中的使用方法:

vue 封装自定义组件之tabal列表编辑单元格组件实例代码

1.先将组件import 进来;

2.然后将组件暴露出去,这样父组件就可以用了;

vue 封装自定义组件之tabal列表编辑单元格组件实例代码

总结

以上所述是小编给大家介绍的vue 封装自定义组件tabal列表编辑单元格组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
JS array数组检测方式解析
May 19 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 #Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 #Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 #Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 #Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 #Javascript
bootstrap-table组合表头的实现方法
Sep 07 #Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 #Javascript
You might like
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
js模块加载方式浅析
2017/08/12 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python中list循环语句用法实例
2014/11/10 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
决心书标准格式
2014/03/11 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
工作简报格式范文
2015/07/21 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android