iview table换行_iview 表格可编辑
var app = newVue({
el:'#app',
data () {return{
columns2: [
{
width:60,
align:'center',
render: (h,params) =>{return h('Checkbox', {
props: {
value:params.row.$isEdit,
},
on: {'on-change': function (state) {
console.log(state);
//不用iview table自带的CheckBox 自己重构一个 点击赋值params.row.$isEdit = state}
}
});
}
},
{
title:'Name',
key:'name'},
{
title:'Age',
key:'age',
render: (h,params) =>{if (params.row.$isEdit) {return h('input', {
domProps: {
value:params.row.age
},
on: {
input: function (event) {params.row.age = event.target.value
}
}
});
}else{return h('div', params.row.age);
}
}
},
{
title:'Address',
key:'address'},
{
title:'Action',
key:'action',
render: (h,params) =>{return h('Button', {
props: {
type:'text',
size:'small'},
on: {
click: ()=>{if (params.row.$isEdit) {this.handleSave(params.row)
}else{this.handleEdit(params.row)
}
}
}
},params.row.$isEdit ? '保存' : '编辑')
}
}
],
data3: [
{
name:'哈哈',
age:18,
address:'上海',
$isEdit:false},
{
name:'啦啦',
age:24,
address:'北京',
$isEdit:false}
]
}
},
methods: {//select_row(selection,index){//console.log('select_row',selection,index)//this.$set(this.data3[index], '$isEdit', true)//},
handleEdit (row) {
console.log('handleEdit',row);this.$set(row, '$isEdit', true)
},
handleSave (row) {
console.log('handleSave',row);this.$set(row, '$isEdit', false)
}
}
})
iview table换行_iview 表格可编辑相关推荐
- iview table 求和_iView table 实现单元格合并
前言 当前问题使用的ivew 版本:3.4.2 后续版本可能会实现相关功能,请留意官方文档. 背景 最近做的项目使用的是iView框架,有个需求是要对iView的table进行单元格合并,但是iVie ...
- iview table 横向拖动表格内容滚动
当表格纵向滚动比较长的时候,横向滚动是很不方便的,要是横向可以拖动滚动就完美了,解决办法就是给表格添加拖动指令,代码如下: const directive = {inserted (my_el) {l ...
- ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
- iview table组件里的 固定列 表格不自适应问题
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [{title: ...
- vue+ iview Table表格插入图片显示不同状态
最近做的项目需求是表格里需要用图片提示下当前数据的状态 选中的及是用的图片做的,红色的是gif图灰色的即是另外一种状态.实现方法: 主要是iview Table表格里的render函数处理的,上可视 ...
- iView Table表格带搜索功能的Table组件
原文地址声明:https://blog.csdn.net/qq_23179075/article/details/79939244 iview-filter-table 一个基于iView Table ...
- 使用 iReport中table组件制作表格导出PDF
一.iReport安装 1.下载安装包: 2.直接按默认安装完成. 3.安装完成后iReport还不能启动,会闪退,请继续下面的操作 4.下载jdk_1.7并安装.注意:不需要配置jdk_1.7版本的 ...
- iview ui 全静态表格，增删改查，分页功能
本demo是一个非常全的,后台管理系统类的表单:增.删.改.查.4个主要功能都齐全的demo,数据采用的本地变量数组加载时调用:非常适用于纯前端页面的渲染:欢迎大家done下学习,以及提问题:(非常适 ...
- php ajax 表格编辑,php ajax表格实时编辑 PHP Ajax实现表格实时编辑
想了解PHP Ajax实现表格实时编辑的相关内容吗,佛祖的腿毛在本文为您仔细讲解php ajax表格实时编辑的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:php,ajax表格实时编辑,a ...
最新文章
- iis7+php_5.5,IIS7+php5.5+fastcgi
- mybatis mysql demo_SpringBoot（入门Demo，整合mybatis，连接mysql）
- windows查看进程
- 云时代的大数据存储-云HBase
- java 对象深拷贝_java深入理解浅拷贝和深拷贝
- html嵌入python代码,python在html中插入简单的代码并加上时间戳的方法
- devops什么意思_devops是什么意思
- 对计算机相关领域及前沿技术的认识,计算机专业教育及新技术讲座（对计算机专业的认识）论文.pdf...
- html表格动态添加图片,引用 制作html帖第四课：在表格中添加图片代码制作精美边框...
- vim yank 命令
- 危地马拉惊现“地狱之门”
- Hive实战之视频网站数据分析
- Appium自动化框架从0到1之 测试用例封装
- 云课堂计算机课病毒及安全设置答案,智慧职教云课堂PC端
- kata cantainer介绍及Ubuntu安装kata cantainer
- 用python3实现HDU爬虫（后续可能更新VJ）2016.11.4更新
- 纯css实现箭头,上下左右的箭头
- Spring05：面向切面编程
- 开源多端合一小程序源码系统+前端+后端+搭建教程
- 宾夕法尼亚大学刘玲洁课题组招募CG、CV方向博士/博士后