iView 实现可编辑表格 1
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.rowconst 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 } = thisconst { id } = p.rowconst 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} = thisthis.tableData = tableData.map(v => {return v.id === id ? { ...v, score: currentScore } : v})this.currentId = ''this.currentScore = ''}}
}
注意: 如果采用的是在 head 标签中引入 iView,该方法在项目中会失效;通过编译开发的项目可行;
若有问题请指正 Github blog issues
iView 实现可编辑表格 1相关推荐
- iView 实现可编辑表格
create at: 2019-02-20 组件 <i-table highlight-row ref="currentRowTable" :columns="co ...
- iview可编辑表格组件封装
因为公司需要尝试新的UI框架,因此自己也是学习了iview这个新的框架,之前一直都是用的element-ui,正好公司项目用到可编辑表格这样的组件,但是网上也是搜不到相关的资料,所以自己在参考了ivi ...
- 在可编辑表格EditorGrid中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍然被插入数据库中...
为什么80%的码农都做不了架构师?>>> 问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍 ...
- Markdown编辑表格时如何输入竖线('|', pipe,vertical bar)
Markdown编辑表格时如何输入竖线 How to input '|'(pipe,vertical bar) in table in markdown editor? 主要思路: 竖线用 | 或者 ...
- LigerUI编辑表格组件单元格校验问题
这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...
- 前台特效(3) 编辑表格
<!DOCTYPE html> <html><head><title>编辑表格</title><meta http-equiv=&qu ...
- office2010表格计算机,2010年职称计算机考试:Word编辑表格
编辑表格 1.选定单元格: ◆选定一个单元格:指向单元格左边框,当光标变成实心箭头时单击. ◆选定一行:指向该项左外侧,当光标变成实心箭头时单击. ◆选定一列:指向该列顶端的网格线,当光标变成实心箭头 ...
- [HTML]HTML5实现可编辑表格
HTML5实现的简单的可编辑表格 [HTML]代码 <!DOCTYPE html > <html > <head> <meta charset="u ...
- android 编辑自定义可编辑表格,smart 框架 列表 可编辑表格
可编辑表格常用属性 colModel: [ {label: "主键ID", name: "hellop1",hidden:true}, {label: &quo ...
最新文章
- 【每日一算法】重排链表
- 如何安装透明窗口主题Emerald在Ubuntu 13.04/12.10/12.04中-PPA
- 【重磅】神策分析 1.13 版本上线 ,持续深耕打造场景化数据分析
- 多窗口管理器Tmux - 从入门到精通
- WM中的OutLook开发和操作
- linux ntfs 速度慢,将U盘磁盘格式改成NTFS解决u盘复制速度慢问题
- Django day17 博客项目(一)
- idea导入java项目步骤,idea与eclipse项目相互导入的过程(图文教程)
- 月薪20k的web前端开发程序员,他们都会的这6招
- (超简单思路)U - C语言实验——单词统计
- JavaScript学习(六十一)—json字符串的解析和JS 对象的序列化
- Python自动化办公 | 补写178份Word日报!
- Linux系统知识汇总
- 【ABAP系列】SAP ABAP的事件执行顺序
- 驾考你准备好了吗 之 交通标志、标线篇
- 心中有佛,看谁都是佛;心中有屎,看谁都是屎。
- 物联网平台搭建的全过程介绍(一)——物联网简介
- 年轻人的第一个开发板——树莓派
- 人脸识别智能服务器,智能化人脸识别服务器
- 局域网可以访问,但打印机就是连不上,提示拒绝访问,原来是这个原因