create at: 2019-02-20

组件

    <i-table highlight-row ref="currentRowTable" :columns="columns" :data="tableData"></i-table>

实现方式:

  • 记录当前需要编辑的列的id,默认为空
  • 需要编辑的列与当前需要编辑的id进行匹配,成功则将该列渲染为包含input标签组件,并绑定input事件

数据处理

export default {
data () {
return {
currentId: '',
currentScore: '',
columns: [
{ title: '名称', key: 'name', align: 'center' },
{
title: '班级',
align: 'center',
render: (h, p) => {
const { id, score } = p.row
const inp = h('input', {
style: {
width: '30%',
padding: '4px 2px',
borderRadius: '4px',
border: '1px solid #e9eaec',
textAlign: 'center'
},
attrs: {
maxlength: 16
},
domProps: {
value: score
},
on: {
input: (event) => {
this.currentScore = event.target.value
}
}
})
return this.currentId === p.row.id ? inp : h('span', score)
}
},
{
title: '操作',
align: 'center',
render: (h, p) => {
const { currentId } = this
const { id } = p.row
const btnEdit = h('i-button', {
on: {
click: () => {
this.currentId = id
}
}
}, '编辑') const btnSaveCancel = [
h('i-button', {
on: {
click: () => {
this.handleSave(id)
}
}
}, '保存'),
h('i-button', {
on: {
click: () => {
this.currentId = ''
this.currentScore = ''
}
}
}, '取消')]
return currentId === id ? h('div', btnSaveCancel) : btnEdit
}
}
],
tableData: [
{ id: 1, name: 1, score: 1 },
{ id: 2, name: 2, score: 2 }]
}
}, methods: {
handleSave (id) {
const {currentScore, tableData} = this
this.tableData = tableData.map(v => {
return v.id === id ? { ...v, score: currentScore } : v
})
this.currentId = ''
this.currentScore = ''
}
}
}

注意: 如果采用的是在 head 标签中引入 iView,该方法在项目中会失效;通过编译开发的项目可行;

若有问题请指正 Github blog issues

iView 实现可编辑表格的更多相关文章

  1. Vue iview可编辑表格的实现

    创建table实例页 views/table.vue <template> <h1>table page</h1> </template> <sc ...

  2. vue+element-ui+slot-scope或原生实现可编辑表格(日历)

    你们公司的产品是不是还在做一个可编辑表格功能? 1.前言 咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架. 2.思路 可编辑表格在后台管理 ...

  3. [HTML]HTML5实现可编辑表格

    HTML5实现的简单的可编辑表格 [HTML]代码 <!DOCTYPE html > <html > <head> <meta charset="u ...

  4. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  5. ExtJS4.2学习(七)EditorGrid可编辑表格(转)

    鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...

  6. jQuery实现可编辑表格

    在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...

  7. LigerUI编辑表格组件单元格校验问题

    这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...

  8. LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法

    LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...

  9. 实现Easyui 可编辑表格

    一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...

随机推荐

  1. 每天学点node系列-zlib

    永不放弃,永不放弃又有两个原则,第一个原则是永不放弃,第二个原则就是:当你想放弃时回头看第一个原则. 概览 做过web性能优化的同学,对性能优化大杀器gzip应该不陌生.浏览器向服务器发起资源请求,比 ...

  2. MySQL sys Schema 简单介绍-1

    参考文档: MySQL- 5.7 sys schema笔记 MySQL 5.7新特性:SYS库详解 MySQL Performance Schema&sys Schema介绍 内存分配统计视图 ...

  3. netty实现的RPC框架

    自己手撸了一个nettyRPC框架,希望在这里给有兴趣的同学们做个参考. 要想实现nettyrpc需要了解的技术要点如下: spring的自定义注解.spring的bean的有关初始化. 反射和动态代 ...

  4. NetCore 中间件获取请求报文和返回报文

    using System; using System.IO; namespace WebApi.Restful.Middlewares { public class MemoryWrappedHttp ...

  5. Element-ui DatePicker显示周数

    1.场景描述 我们公司是做电商的,运营的工作指标都是按周来定的,所以他们对周特别敏感,希望我们能在日期选择器上显示周数.刚接到这个需求时,心中很不乐意,因为Element-ui的日期选择器根本不支持显 ...

  6. xx.exe 中的 0x014180bd 处有未经处理的异常: 0xC0000005: 读取位置 0xfeeefeee 时发生访问冲突(当指针访问异常时,应考虑是不是对象未创建)。

    xx.exe 中的 0x014180bd 处有未经处理的异常: 0xC0000005: 读取位置 0xfeeefeee 时发生访问冲突

  7. React躬行记(9)——组件通信

    根据组件之间的嵌套关系(即层级关系)可分为4种通信方式:父子.兄弟.跨级和无级. 一.父子通信 在React中,数据是自顶向下单向流动的,而父组件通过props向子组件传递需要的信息是组件之间最常见的 ...

  8. java:选择排序法对数组排序

    最近想练一练Java的算法,然后碰到LeetCode上一道从排序数组删除重复项的小题,刚开始没看到是从排序数组中,就乱写,其实要是排序树组,就比乱序的感觉上好写多了.然后就想回顾下冒泡法对数组排序,凭 ...

  9. Git 安装及使用指南

    1 简介1.1 Git1.2 Github2 Git 在 Windows 下的安装和使用2.1 msysgit2.2 Tortoisegit2.2.1 安装2.2.2 配置2.2.3 简单使用 1 简 ...

  10. Apache Httpd 启用重定向 rewrite

    1.启用模块 由:#LoadModule rewrite_module modules/mod_rewrite.so 更改为:LoadModule rewrite_module modules/mod ...