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 相关文章推荐
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
js实现星星海特效的示例
Sep 28 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
用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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php header Content-Type类型小结
2011/07/03 PHP
用php解析html的实现代码
2011/08/08 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP chr()函数讲解
2019/02/11 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python探索之自定义实现线程池
2017/10/27 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
服装创业计划书范文
2014/02/05 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
教师业务培训方案
2014/05/01 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
MySQL分区表管理命令汇总
2022/03/21 MySQL