EditRow.ts

vue+element-ui+slot-scope原生实现可编辑表格


interface NoParamConstructor<T> {
new(): T;
} export default class EditRow<T> {
origin: T = null
copy: T = null
is_edit: boolean = false
ctor: NoParamConstructor<T>; constructor(ctor: NoParamConstructor<T>, origin: T) {
this.ctor = ctor
this.origin = origin
this.show_edit = this.show_edit.bind(this)
this.save = this.save.bind(this)
}
show_edit() {
this.copy = Object.assign(new this.ctor(), this.origin)
this.is_edit = true
}
save() {
this.origin = this.copy
this.is_edit = false
}
}

vue file


<template>
<el-row>
<el-table :data="rows" size="mini">
<el-table-column label="name">
<template slot-scope="scope">
<template v-if="scope.row.is_edit">
<input v-model="scope.row.copy.name" />
<el-button size="mini" @click="scope.row.save">save</el-button>
<el-button size="mini" @click="scope.row.is_edit = false">cancel</el-button>
</template>
<template v-else>
<span @click="scope.row.show_edit">{{ scope.row.origin.name }}</span>
</template>
</template>
</el-table-column>
</el-table>
</el-row>
</template> <script>
import EditRow from './EditRow.ts' class entity {
constructor() {
this.name = '123'
}
} const rows = [
new EditRow(entity, new entity())
] export default {
data() {
return {
rows
}
}
}
</script>

原文地址:https://segmentfault.com/a/1190000012471593

element-ui table 行内编辑的更多相关文章

  1. JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  2. [转]JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    本文转自:http://www.cnblogs.com/landeanfen/p/5821192.html 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  3. js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable

    js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...

  4. bootstrap-editable实现bootstrap-table行内编辑

    bootstrap-editable行内编辑效果如下: 需要引入插件 列初始化代码,为可编辑的列添加editable属性: columns = [ { title: '文件名', field: 'Na ...

  5. BootStrap行内编辑

    Bootstrap行内编辑,这里下载了一个X-Editable的插件,在Nuget里面就可以搜到. 引用的js和css大致如下: @*.Jquery组件引用*@ <script src=&quo ...

  6. datatables表格行内编辑的实现

    Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...

  7. bootstrap editable 行内编辑

    除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...

  8. Django项目:CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑

    #base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...

  9. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

随机推荐

  1. AOJ 0118: Property Distribution (简单DFS)

    题目链接:http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=0118 题意:给定一个矩阵,同类字符相连的为一个块,问总共有几个块. 输入 ...

  2. RabbitMq笔记(2)

    今天收获不少,记个笔记. namespace RabbitMQTest { class Program { static void Main(string[] args) { Consumer(); ...

  3. XManager远程Linux 安装Oracle 图形化界面xstart解决方法

    一.安装Oracle_11g_R21.安装所必要的软件包:(CentOS)参见官方文档-rw-r--r--. 1 oracle oinstall 1358454646 Feb  5 22:57 p10 ...

  4. hiho 1620 - 股票价格3 - 无限制的单调队列?

    题目链接 小Hi最近在关注股票,为了计算股票可能的盈利,他获取了一只股票最近N天的价格A1~AN. 小Hi想知道,对于第i天的股票价格Ai,几天之后股价会第一次超过Ai. 假设A=[69, 73, 6 ...

  5. day02变量

    一. 什么是变量? 变量:在程序运行过程中,值会发生变化的量.(与之相对应的,常量就是在程序运行过程中,值不会发生变化的量).无论是变量还是常量,在创建时都会在内存中开辟一块空间,用于保存它的值. 二 ...

  6. FFT&NTT学习笔记

    具体原理就不讲了qwq,毕竟证明我也不太懂 FFT(快速傅立叶变换)&NTT(快速数论变换) FFT //求多项式乘积 //要求多项式A和多项式B的积多项式C //具体操作就是 //DFT(A ...

  7. HISTFILESIZE与HISTSIZE的区别

    在linux系统中,history命令可以输出历史命令,历史命令默认保存在文件~/.bash_history中. HISTFILESIZE 与 HISTSIZE都是history命令需要用到的两个sh ...

  8. 紫书 例题 11-5 UVa 10048 (Floyd求最大权值最小的路径)

    这道题是Floyd的变形 改成d[i][j] = min(d[i][j], max(d[i][k], d[k][j]))就好了. #include<cstdio> #include< ...

  9. hdu 1518 Square 深搜,,,,花样剪枝啊!!!

    Square Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  10. windows 下面的grep awk 命令

    windows 下面的grep awk 命令 grep 学习了:http://blog.csdn.net/chengfans/article/details/53784936 awk学习了:http: ...